react - fusioncharts example with typescript (linear-scale-gauge)

npm install fusioncharts --save
npm install react-fusioncharts --save

chartWithParameters.tsx

import React from 'react';
import LinearChart from './linearChart';

class ChartWithParameters extends React.PureComponent {
  render() {
    return (
      <LinearChart
        belowAverageValue={"3"}
        averageValue={"7"}
        highValue={"8"}
        existingValue={"5"}
      />
    );
  }
}

export default ChartWithParameters;

linearChart.tsx

import React from 'react';
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import Widgets from 'fusioncharts/fusioncharts.widgets';

ReactFC.fcRoot(FusionCharts, Widgets);

interface IOwnProps {
  belowAverageValue: string;
  averageValue: string;
  highValue: string;
  existingValue: string;
}

type IProp = IOwnProps;

class LinearChart extends React.PureComponent<IProp> {
  render() {
    const linearChartConfigs = {
      type : 'hlineargauge',
      width : '700',
      height : '150',
      dataFormat : 'json',
      dataSource : {
        chart: {
          caption: "Example Flow Chart",
          bgColor: '#f7fcff',
          upperLimit: this.props.highValue,
          chartTopMargin: '20',
          chartBottomMargin: '20',
          valueFontSize: '12',
          gaugeFillMix: '{light-30}',
          showValue: '1',
          majorTMNumber: '11',
          majorTMColor: '#1e5779',
          showBorder: '0',
        },
        colorRange: {
          color: [
            {
              maxValue: this.props.averageValue,
              code: '#FFC533',
              label: "averageValue",
            },
            {
              maxValue: this.props.belowAverageValue,
              code: '#F2726F',
              label: "belowAverageValue",
            },
            {
              maxValue: this.props.highValue,
              code: '#62B58F',
              label: "highValue",
            },
          ],
        },
        pointers: {
          pointer: [
            {
              value: this.props.existingValue,
              showValue: '0',
              radius: '10',
              bgColor: '#6400ff',
              BorderColor: '#6400ff',
            },
          ],
        },
        trendPoints: {
          point: [
            {
              startValue: this.props.existingValue,
              endValue: this.props.highValue,
              thickness: '1',
              markerColor: '#0075c2',
              markerBorderColor: '#666666',
              markerRadius: '5',
              alpha: '30',
              displayValue: ' ',
            },
            {
              startValue: this.props.averageValue,
              thickness: '1',
              useMarker: '1',
              markerColor: '#87dc9',
              markerBorderColor: '#fff',
              markerRadius: '5',
              displayValue: ('average' + '<br/>' + 'count:' + this.props.averageValue + '<br/>'),
            },
            {
              startValue: this.props.belowAverageValue,
              thickness: '1',
              useMarker: '1',
              markerColor: '#f5be416',
              markerBorderColor: '#fff',
              markerRadius: '5',
              displayValue: ('below average' + '<br/>' + 'count:' +this.props.belowAverageValue + '<br/>'),
            },
          ],
        },
      },
    };

    return <ReactFC {...linearChartConfigs} />;
  }
}

export default LinearChart;

references:
https://www.fusioncharts.com/react-charts
https://www.fusioncharts.com/charts/gauges/linear-scale-gauge

React >> tooltip example with typescript (material-ui)

npm install @material-ui/core --save

  
tooltipExample.tsx
**   enterDelay={100}  >> tooltip is displayed in 100ms
**   leaveDelay={200} >> tooltip hides in 200ms
**  "On mobile, the tooltip is displayed when the user longpresses the element. You can disable this feature with the disableTouchListener property." ( references: https://material-ui.com/components/tooltips/ )

import React from 'react';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import './tooltipExample.scss';
import ArrowTooltip from '../../commons/arrowTooltip/arowTooltip';

const listItems = ["tooltip 1", "tooltip 2", "tooltip 3", "tooltip 4"];

class TooltipExample extends React.PureComponent {
  render() {
    return (
      <>
        <div className="custom-margin">
          <strong>Tooltip at the left on the icon</strong>
          <Tooltip
            title={listItems.map((item:string, idx: number) => <li key={idx}>{item}</li>)}
            placement="right"
            enterDelay={100}
            leaveDelay={200}
          >
            <span className="info" />
          </Tooltip>
        </div>

        <div className="custom-margin">
          <strong>ArrowTooltip at the left on the icon</strong>
          <ArrowTooltip
            title={listItems.map((item:string, idx: number) => <li key={idx}>{item}</li>)}
            placement="right"
            enterDelay={100}
            leaveDelay={200}
          >
            <span className="info" />
          </ArrowTooltip>
        </div>

        <div className="custom-margin">
          <Tooltip
            title="Tooltip at the bottom on the button"
            placement="bottom-start"
            enterDelay={100}
            leaveDelay={200}
          >
            <Button>Button example</Button>
          </Tooltip>
        </div>

      </>
    );
  }
}

export default TooltipExample;

tooltipExample.scss
(you should also add a file named as info.svg in the project)

.info {
  display: inline-block;
  background: url(./info.svg) no-repeat;
  background-size: 13px 18px;
  width: 15px;
  height: 20px;
  margin-left: 3px;
}

.custom-margin {
  margin-bottom: 25px;
}

arrowTooltip.tsx ( references: https://material-ui.com/components/tooltips/ )

import React from 'react';
import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';
import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
import PropTypes from 'prop-types';

function arrowGenerator(color: string) {
  return {
    '&[x-placement*="bottom"] $arrow': {
      top: 0,
      left: 0,
      marginTop: '-0.95em',
      width: '3em',
      height: '1em',
      '&::before': {
        borderWidth: '0 1em 1em 1em',
        borderColor: `transparent transparent ${color} transparent`,
      },
    },
    '&[x-placement*="top"] $arrow': {
      bottom: 0,
      left: 0,
      marginBottom: '-0.95em',
      width: '3em',
      height: '1em',
      '&::before': {
        borderWidth: '1em 1em 0 1em',
        borderColor: `${color} transparent transparent transparent`,
      },
    },
    '&[x-placement*="right"] $arrow': {
      left: 0,
      marginLeft: '-0.95em',
      height: '3em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 1em 1em 0',
        borderColor: `transparent ${color} transparent transparent`,
      },
    },
    '&[x-placement*="left"] $arrow': {
      right: 0,
      marginRight: '-0.95em',
      height: '3em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 0 1em 1em',
        borderColor: `transparent transparent transparent ${color}`,
      },
    },
  };
}

const useStylesArrow = makeStyles((theme: Theme) =>
  createStyles({
    tooltip: {
      position: 'relative',
    },
    arrow: {
      position: 'absolute',
      fontSize: 6,
      width: '3em',
      height: '3em',
      '&::before': {
        content: '""',
        margin: 'auto',
        display: 'block',
        width: 0,
        height: 0,
        borderStyle: 'solid',
      },
    },
    popper: arrowGenerator(theme.palette.grey[700]),
  }),
);

export default function ArrowTooltip(props: TooltipProps) {
  const { arrow, ...classes } = useStylesArrow();
  const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);

  return (
    <Tooltip
      classes={classes}
      PopperProps={{
        popperOptions: {
          modifiers: {
            arrow: {
              enabled: Boolean(arrowRef),
              element: arrowRef,
            },
          },
        },
      }}
      {...props}
      title={
        <React.Fragment>
          {props.title}
          <span className={arrow} ref={setArrowRef} />
        </React.Fragment>
      }
    />
  );
}

ArrowTooltip.propTypes = {
  title: PropTypes.node,
};

screenshots: