JSFiddle - React, Tailwind, and code Playground

by starikcetin

HTML

<script src="https://unpkg.com/@paraboly/[email protected]/dist/pwc-map-legend.js"></script>
<pwc-map-legend
  legend-text="I am initialized from HTML!"
  title-text="Legend (HTML)"
  entries='[{"name":"Girdi","count":0,"color":"#000000","svgStyle":{"stroke-width":1,"stroke-opacity":1}},{"name":"Girdi","count":0,"color":"#ff0000","svgStyle":{"stroke-width":1,"stroke-opacity":1}}]'
></pwc-map-legend>

<pwc-map-legend id="js-fill"></pwc-map-legend>

CSS

pwc-map-legend {
  display: inline-block;
  margin-left: 100px;;
  margin-top: 100px;
}

JavaScript

var pwcMapLegend = document.querySelector("pwc-map-legend#js-fill");
pwcMapLegend.legendText = "I am initialized from JS!";
pwcMapLegend.titleText = "Legend (JS)";
pwcMapLegend.entries = [
	{
  	name: "Paraboly",
    count: 215,
    color: "red",
    svgStyle: { "stroke-dasharray": "4 1 2 3", "stroke-opacity": 0.9 }
  },
  {
  	name: "Google",
    count: 610,
    color: "blue",
    svgStyle: { "stroke-dasharray": "4 1", "stroke-opacity": 0.5 }
  },
  {
  	name: "Apple",
    count: 5111,
    color: "orange",
    svgStyle: { "stroke-dasharray": 4, "stroke-opacity": 0.9 }
  },
];