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": "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 }
    }
]'
></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 }
  },
];