JSFiddle - React, Tailwind, and code Playground

by longmatthewh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

/*
PROBLEM:

 When using Typescript and typing the function params like this...

const getLegendItemForSeries = (series:HighCharts.Series) => {

...I can't access legendItem, legendSymbol, or color without casting the Series object as any like this...

(series as any).legendItem

The following 3 functions have been extracted to the top to highlight the needs for accessing the 3 properties on Series
*/
const getLegendItemForSeries = (series) => {
  //need to cast series as any here in Typescript
  //(series as any).legendItem
  return series.legendItem;
}

const getLegendSymbolForSeries = (series) => {
  //need to cast series as any here in Typescript
  //(series as any).legendSymbol
  return series.legendSymbol;
}

const getColorForSeries = (series) => {
  //need to cast series as any here in Typescript
  //(series as any).color
  return series.color;
}

const seriesLetters = {
  "Series 1": "A",
  "Series 2": "B",
  "Series 3": "C",
};

const legendItemVisibiltyIndicatorClass = "legend-item-visibility";
const legendItemVisibiltyVisible = "Visible";
const legendItemVisibiltyHidden = "Hidden";

const onChartLoad = (chart) => {
  addSeriesVisibilityIndicators(chart.series);
  addLetterToLegendSymbol(chart.series, seriesLetters);
  applyLegendSymbolStyle(chart);
};

const svgBuilder = (type, attributes) => {
  const svgNameSpace = "http://www.w3.org/2000/svg";
  const svgElement = document.createElementNS(svgNameSpace, type);
  for (const attributeName in attributes) {
    svgElement.setAttributeNS(null, attributeName, attributes[attributeName]);
  }
  return svgElement;
};

const svgTextBuilder = (attributes, text) => {
  const textElement = svgBuilder("text", attributes);
  const textNode = document.createTextNode(text);
  textElement.appendChild(textNode);
  return textElement;
};

const updateSeriesVisibilityIndicator = (clickedSeries) => {
  const seriesBecomingVisible = !clickedSeries.visible;
  const indicatorToChange =...