I want to add a pie chart in my Polymer 1.0 application. I used chart-elements with Polymer 0.5, but when migrated to 1.0 it stopped working!
I did not find anything for 1.0 yet. Does 1.0 at all has a ready made chart element? Seeking for expert help.
Thanks in advance.
EDIT
According to Ben's suggestion I tried with google-chart component and this is what I did. But the chart is not rendering.
Step 1: I installed google-chart by using bower install --save GoogleWebComponents/google-chart
Step 2: Created a custom element using yo polymer:el custom-pie-chart which looks like this:
<dom-module id="custom-pie-chart">
<style>
:host
{
display: -webkit-flex;
display: -ms-flex;
display: flex;
margin: 0;
padding: 0;
width: 400px;
height: 300px;
}
#chartdiv
{
width: 100%;
}
google-chart
{
height: 300px;
width: 50em;
}
</style>
<template>
<link rel="stylesheet" href="custom-pie-chart.css">
<div id="chartdiv">
<google-chart
type='pie'
options='{"title": "Distribution of days in 2001Q1"}'
cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
</google-chart>
</div>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'custom-pie-chart',
ready: function () {
}
});
})();
</script>
Step 3: Added references of google-chart and my custom element custom-pie-chart in elements.html
Step 4: Added custom-pie-chart in my index.html as follows:
<post-card id="sales-info" title="Points from customer">
<custom-pie-chart></custom-pie-chart>
</post-card>
But chart is not rendering. Area comes blank like this:
NB: I am also getting the following error on console (Chrome)
Uncaught (in promise) TypeError: Request method 'POST' is unsupported
at TypeError (native)
at http://localhost:3000/bower_components/sw-toolbox/sw-toolbox.js:20:430
I removed all references of google-chart to check whether this is responsible. But it still comes up.
What wrong I am doing? Please help!
This causes the error:
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
because Polymer only recognizes rows='[[...]]' and thinks it is a data binding. Two spaces should solve the problem:
rows='[ ["Jan", 31],["Feb", 28],["Mar", 31] ]'
Related
TYPO3 11.5.4
I want to add a Plain HTML content element to a page, e.g.:
<style type="text/css">
h1#testheader { font-weight: bold; }
</style>
<h1 id="testheader">
Header
</h1>
(just as a simplified example)
But rendered output is:
<style type="text/css"> h1#testheader { font-weight: bold; } </style>
Header
I thought that style is allowed because I set:
lib.parseFunc.allowTags = ...,style,...
lib.parseFunc_RTE.allowTags = ...,style,...
but it doesn't work.
Setting
lib.parseFunc.htmlSanitize = 0
helps but is there something better to allow <style> in Plain HTML content elements?
EDIT:
Looking into the DB entry the html tags are not encoded, so no "<" or ">" instead of "<" and ">", so it's not an issue of the RTE.
After some more research (hours of hours again invested) I come to the conclusion that the only way is to extend the HTMLSanitizer.
The following sources have been used for this solution:
https://punkt.de/de/blog/2021/htmlsanitizer-in-typo3.html
https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/9.5.x/Important-94484-IntroduceHTMLSanitizer.html
https://gist.github.com/ohader/2239dab247e18d23e677fd1b816f4fd5
The complete solution to allow <style>,<script> and <iframe> is shown below.
Still I am not able to allow <font> with this approach!
It's implemented in a local site package (gpcf_theme) and composer is used.
Add <style>,<script> and <iframe> to
lib.parseFunc.allowTags = ... style, ..., iframe, script, ...
in the TypoScript part of the site package.
style seems to be standard and is already part of this list.
The path to the local site package is:
local_packages/gpcf_theme
with a symbolic link to it from:
public/typo3conf/ext/gpcf_theme -> ../../../local_packages/gpcf_theme
These are the important file changes:
local_packages/gpcf_theme/composer.json:
{
"name": "oheil/gpcf_theme",
...
"autoload": {
"psr-4": {
"Oheil\\GpcfTheme\\": "Classes/"
}
},
...
}
local_packages/gpcf_theme/ext_localconf.php:
<?php
defined('TYPO3_MODE') || die();
...
$GLOBALS['TYPO3_CONF_VARS']['SYS']['htmlSanitizer']['default'] = \Oheil\GpcfTheme\MyDefaultBuilder::class;
...
local_packages/gpcf_theme/Classes/MyDefaultBuilder.php
<?php
namespace Oheil\GpcfTheme;
use TYPO3\CMS\Core\Html\DefaultSanitizerBuilder;
use TYPO3\HtmlSanitizer\Behavior;
use TYPO3\HtmlSanitizer\Behavior\Attr;
use TYPO3\HtmlSanitizer\Behavior\Tag;
class MyDefaultBuilder extends \TYPO3\CMS\Core\Html\DefaultSanitizerBuilder
{
protected function createBehavior(): \TYPO3\HtmlSanitizer\Behavior
{
// https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/9.5.x/Important-94484-IntroduceHTMLSanitizer.html
return parent::createBehavior()
->withName('common')
->withTags(
(new Tag(
'style',
Tag::ALLOW_CHILDREN + Behavior::ENCODE_INVALID_TAG
))->addAttrs(
(new Attr('type')),
...$this->globalAttrs
),
(new Tag(
'iframe',
Tag::ALLOW_CHILDREN
))->addAttrs(
...array_merge(
$this->globalAttrs,
[$this->srcAttr],
$this->createAttrs('scrolling', 'marginwidth', 'marginheight', 'frameborder', 'vspace', 'hspace', 'height', 'width')
)
),
(new Tag(
'script',
Tag::ALLOW_CHILDREN
))->addAttrs(
...array_merge(
$this->globalAttrs,
[$this->srcAttr]
)
),
// more tags...
);
}
}
After these changes of course you need to clear the TYPO3 cache and (not sure here) you need to do:
composer remove "oheil/gpcf_theme"
composer require "oheil/gpcf_theme"
The above is working now, but I am still happy for any expert to give some more insights in what is wrong or can be done better, perhaps easier?
And why does this not work for <font> ?
Example:
<font class="font713099">Some Text</font>
I am trying to learn how to use the interact.js library and I cant get the resizing example to be draggable. I can resize the div ".resize-drag" but I don´t know how to get it draggable. Can anyone tell me is wrong with my code?
This code is only so that I can learn to implement the resize example provided at http://interactjs.io/ So far I´ve tried using npm instead of the script tag. When I copied the example below from the top of the interact.js website and renamed the element ".item" in the interact claus but that did not work
interact('.item').draggable({
onmove(event) {
console.log(event.pageX,
event.pageY)
}
})
I suspected it might be a syntax error so I also tried adding semicolon behind the function but that didn´t seem to be the problem. Please have a look at my entire code below to see what I have done wrong.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.resize-drag {
background-color: #29e;
color: white;
font-size: 20px;
font-family: sans-serif;
border-radius: 8px;
padding: 20px;
margin: 30px 20px;
width: 120px;
/* This makes things *much* easier */
box-sizing: border-box;
}
.resize-container {
display: inline-block;
width: 100%;
height: 240px;
background-color: lightblue;
}
</style>
<script
src="https://unpkg.com/interactjs#1.3.4/dist/interact.min.js"></script>
<script type="text/javascript">
interact('.resize-drag').draggable({
onmove(event) {
console.log(event.pageX,
event.pageY)
}
})
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener,
restrict: {
restriction: 'parent',
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
})
.resizable({
// resize from all edges and corners
edges: { left: true, right: true, bottom: true, top: true },
// keep the edges inside the parent
restrictEdges: {
outer: 'parent',
endOnly: true,
},
// minimum size
restrictSize: {
min: { width: 100, height: 50 },
},
inertia: true,
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '\u00D7' +
Math.round(event.rect.height);
});
</script>
</head>
<body>
<div class="resize-container">
<div class="resize-drag">
Resize from any edge or corner
</div>
</div>
</body>
</html>
I want to be able to drag the div and not just resize it.
I recently struggled with that as well, and it turned out that the 'resizing' code blurbs don't have all the code. The js is missing window.dragMoveListener and dragMoveListener, which is found in the 'dragging' section.
Specifically you need to add this
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
I was trying out Uber's deck.gl by adding the component to my react app. But nothing appears.
I believe it could be related to mapbox. It appeared once but that was it.
I set the width, height, etc. But nothing works.
This is basic example in their site.
Deck Gl with React
Here is my code. deckgl.component.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { StaticMap } from 'react-map-gl';
import DeckGL, { LineLayer, ScatterplotLayer } from 'deck.gl';
const MAPBOX_ACCESS_TOKEN = '<MAPBOX_TOKEN>';
// Viewport settings
const INITIAL_VIEW_STATE = {
latitude: 37.785164,
longitude: -122.41669,
zoom: 16,
bearing: -20,
pitch: 60
};
class DeckGlComponent extends Component {
render() {
return (
<DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true} width="100%" height="100%">
<StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
<LineLayer
data={[{ sourcePosition: [-122.41669, 37.7883], targetPosition: [-122.41669, 37.781] }]}
getStrokeWidth={5}
/>
<ScatterplotLayer
data={[{ position: [-122.41669, 37.79] }]}
radiusScale={100}
getFillColor={[0, 0, 255]}
/>
</DeckGL>
);
}
}
export default DeckGlComponent;
and index.js
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import DeckGlComponent from './deckgl.component';
render(
<DeckGlComponent />,
document.getElementById('root')
);
serviceWorker.unregister();
It's absolutely basic. But nothing turns up. I created a new mapbox token just to be sure and still nothing.
According to your description (since there's not too much information), and mapbox token is active as you said, I suspect if you create a HTML file contains root element, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#root {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
This file is required when you calling these codes:
render(
<DeckGlComponent />,
document.getElementById('root')
);
You can put your code on codepen or some online editors, so that we can help you more specifically.
Besides, I recommend you read codes in this folder https://github.com/uber/deck.gl/tree/master/examples/get-started rather than the codes in documents. Sometimes, codes in documents is for explaining concepts, and not ready for running.
I implemented the Klaviyo Popup in the way that is explained at https://help.klaviyo.com/hc/en-us/articles/115005249548-Add-and-Customize-a-Legacy-Popup. How can I configure the error messages when the form does not validate? For example in the documentation I found this:
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachModalSignUp({
list: 'LIST_ID',
delay_seconds: 10.5,
content: {
clazz: ' klaviyo_modal_LIST_ID',
header: 'Join our Newsletter!',
subheader: 'Get the latest and greatest news from us.',
button: 'Subscribe Me!',
success: 'Thanks! Check your email for a confirmation.',
extra_fields: ["$first_name", "$last_name"],
styles: '.klaviyo_modal.klaviyo_modal_LIST_ID { font-family: "Helvetica Neue", Arial}.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_header { color:#222;}.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_subheader { color:#222;}.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_submit_button,.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_submit_button span { background-color:#0064cd; background-image: none; border-radius: 2px;}.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_submit_button:hover,.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_submit_button span:hover { background-color:#0064cd; background-image: none; }.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_inner,.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_fieldset .klaviyo_field_group input[type=text],.klaviyo_modal.klaviyo_modal_LIST_ID .klaviyo_fieldset .klaviyo_field_group input[type=email] { border-radius: 2px;}'
}
});
</script>
Notice how in the documentation they include this part:
success: 'Thanks! Check your email for a confirmation.',
I was expecting to see something like this for error messages:
error_message: 'My custom error message.',
Is there a way to configure custom error messages? Thank you.
When reading this Klaviyo's blog entry at https://www.klaviyo.com/blog/new-klaviyo-popup-builder, it is my impression that they want to focus on this New Klaviyo Form Builder, which is great for people who need something easier than writing HTML/CSS. It would not surprise me if Klaviyo does not have a way to customize error messages using the "Legacy Popup", as they call it at https://help.klaviyo.com/hc/en-us/articles/115005249548-Add-and-Customize-a-Legacy-Popup, even though to me it should not be a "legacy" way to build pop-ups in Klaviyo.
I've tried creating pages using the 'standard layout' and 'custom layout' but neither allows the use of the {block:Posts} variable(s). I need to re-create essentially the archive page but with some custom css. Is there any way to accomplish this?
If I try $("#someDiv").load("/archive", "#content"); the whole page formatting gets screwed up. Is there a way to load just the <a> tags into a div on my custom page?
Or would it be possible to use the API entirely client side to accomplish this?
Any ideas on this would be appreciated.
I came up with two possible solutions if anyone else finds themselves stuck on this. I abandoned this first one before finalizing it, so it's a bit rough but a good start. It uses the API to load photos (that was all I needed) as you scroll down the page.
<script>
function getPhotos(offset){
$.ajax({
url: "http://api.tumblr.com/v2/blog/[tumblr].tumblr.com/posts?api_key=[key]&offset="+offset,
dataType: 'jsonp',
success: function(results){
loaded += 20;
total = results.response.blog.posts;
if(total > loaded){
results.response.posts.forEach(function(post){
post.photos.forEach(function(photo){
$("#photos ul").append("<li class='"+post.tags.join(" ")+"'><img src='"+photo.alt_sizes[0].url+"'></li>");
$("#photos").imagesLoaded(function(){
$("#photos").masonry({
itemSelector: 'li'
});
});
});
});
if($("#photos ul").height() < $(window).height()){
getPhotos(loaded);
}
}
}
});
}
loaded = 0;
getPhotos(loaded);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
getPhotos(loaded);
}
});
</script>
What I've ended up doing is just using an iframe with a custom stylesheet appended to the head.
html:
<head>
<script src="http://[remote location]/frame.js"></script>
</head>
<body>
<div id="photos">
<iframe name="frame1" id="frame1" src="http://[tumblr]/archive" frameBorder="0"></iframe>
</div>
</body>
frame.js:
$(function(){
function insertCSS(){
var frm = frames['frame1'].document;
var otherhead = frm.getElementsByTagName("head")[0];
if(otherhead.length != 0){
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "http://[remote location]/frame.css");
otherhead.appendChild(link);
setTimeout(function(){$("#frame1").show();}, 200);
clearInterval(cssInsertion);
}
}
cssInsertion = setInterval(insertCSS, 500);
//setTimeout(insertCSS, 1000);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && $("#frame1").height() < 50000) {
$("#frame1").css("height", "+=1000px");
}
});
});
frame.css (stylesheet appended into iframe)
body{
overflow: hidden;
}
#nav_archive{
display: none;
}
.heading{
display: block !important;
}
.old_archive #content{
margin: 0 auto 0;
}
style.css (stylesheet on page where iframe is located)
#frame1{
border: none;
width: 100%;
height: 3000px;
overflow: hidden;
display: none;
}