@oliasoft-open-source/charts-library 3.3.6-beta-5 → 3.3.6

package/src/components/pie-chart/pie-chart.jsx

@@ -1,458 +0,0 @@
-import React, { useRef, useState } from 'react';
-import cx from 'classnames';
-import {
-  ArcElement,
-  CategoryScale,
-  Chart as ChartJS,
-  Filler,
-  Legend,
-  LinearScale,
-  LogarithmicScale,
-  Title,
-  Tooltip,
-} from 'chart.js';
-import zoomPlugin from 'chartjs-plugin-zoom';
-import dataLabelsPlugin from 'chartjs-plugin-datalabels';
-import { Pie } from 'react-chartjs-2';
-
-import { round } from '@oliasoft-open-source/units';
-import { roundNumberToPrecision } from '@oliasoft-open-source/units/dist/rounding/rounding';
-import { ANIMATION_DURATION } from '../../helpers/chart-consts';
-import styles from './pie-chart.module.less';
-import { colors, generateRandomColor } from './pie-chart-utils';
-import { getDefaultProps, PieChartPropTypes } from './pie-chart-prop-types';
-import { setDefaultTheme } from '../../helpers/chart-utils';
-
-ChartJS.register(
-  LinearScale,
-  CategoryScale,
-  LogarithmicScale,
-  ArcElement,
-  Legend,
-  Tooltip,
-  Title,
-  Filler,
-  zoomPlugin,
-  dataLabelsPlugin,
-);
-
-/**
- * this is a pie chart component
- * @param {} props
- * @param {import('./pie-chart.interface').IPieChartProps} IPieChartProps
- * ./pie-chart.interface
- */
-const PieChart = (props) => {
-  setDefaultTheme();
-  const chart = getDefaultProps(props);
-  const chartRef = useRef(null);
-  const [pointHover, setPointHover] = useState(false);
-  const { data, options, testId } = chart;
-
-  const generateDatasets = (datasets) => {
-    const copyDataset = JSON.parse(JSON.stringify(datasets));
-
-    if (options.graph.stacked) {
-      const generatedDataset = {
-        label: copyDataset[0].label,
-        backgroundColor: [],
-        borderColor: [],
-        borderWidth: parseFloat(copyDataset[0].borderWidth) || '1',
-        data: [],
-      };
-      data.labels.map((label, labelIndex) => {
-        copyDataset.map((arc, arcIndex) => {
-          generatedDataset.data.push(arc.data[labelIndex]);
-          const { backgroundColor } = arc;
-          const { borderColor } = arc;
-          generatedDataset.backgroundColor.push(
-            (Array.isArray(backgroundColor)
-              ? backgroundColor[labelIndex % borderColor.length]
-              : backgroundColor) ||
-              colors[labelIndex] + `${99 - 10 * arcIndex}`,
-          );
-          generatedDataset.borderColor.push(
-            (Array.isArray(borderColor)
-              ? borderColor[labelIndex % borderColor.length]
-              : borderColor) || colors[labelIndex],
-          );
-        });
-      });
-      return [generatedDataset];
-    }
-
-    const generatedDatasets = copyDataset.map((pieDataset, index) => {
-      const borderWidth = parseFloat(pieDataset.borderWidth) || '1';
-      const color = pieDataset.data.map(
-        (pie, i) => colors[i] || generateRandomColor(),
-      );
-      const borderColor = pieDataset.borderColor || color;
-      const backgroundColor =
-        pieDataset.backgroundColor ||
-        color.map((col) => col + `${99 - 11 * index}`);
-
-      return {
-        ...pieDataset,
-        borderWidth,
-        borderColor,
-        backgroundColor,
-      };
-    });
-    return generatedDatasets;
-  };
-
-  const generatedDatasets = generateDatasets(data.datasets);
-
-  const getTitle = () => {
-    return options.title !== ''
-      ? {
-          display: true,
-          text: chart.options.title,
-        }
-      : {};
-  };
-
-  const legendClick = (e, legendItem, legend) => {
-    const chartInstance = legend.chart;
-    const { datasets } = chartInstance.data;
-    const { index } = legendItem;
-
-    if (options.graph.stacked) {
-      if (options.legend.useDataset) {
-        for (
-          let i = 0;
-          i < chartInstance.config._config.data.datasets[0].data.length;
-          i++
-        ) {
-          if (i % data.datasets.length === index) {
-            const meta = chartInstance.getDatasetMeta(0);
-            const arc = meta.data[i];
-            arc.hidden = !arc.hidden;
-          }
-        }
-      } else {
-        for (
-          let i = 0;
-          i < chartInstance.config._config.data.datasets[0].data.length;
-          i++
-        ) {
-          if (parseInt(i / data.datasets.length) === index) {
-            const meta = chartInstance.getDatasetMeta(0);
-            const arc = meta.data[i];
-            arc.hidden = !arc.hidden;
-          }
-        }
-      }
-    } else {
-      if (options.legend.useDataset) {
-        const meta = chartInstance.getDatasetMeta(index);
-        meta.hidden = !meta.hidden;
-      } else {
-        if (datasets.length > 1) {
-          for (let i = 0; i < data.datasets.length; i++) {
-            const meta = chartInstance.getDatasetMeta(i);
-
-            const arc = meta.data[index];
-            arc.hidden = !arc.hidden;
-          }
-        } else {
-          const meta = chartInstance.getDatasetMeta(0);
-          const arc = meta.data[index];
-          arc.hidden = !arc.hidden;
-        }
-      }
-    }
-
-    if (options.interactions.onLegendClick)
-      options.interactions.onLegendClick(legendItem?.text, legendItem.hidden);
-
-    chartInstance.update();
-  };
-
-  const onClick = (evt, elements, chartInstance) => {
-    chartInstance.resetZoom();
-    // TODO: Restore redux-logic for zoom
-  };
-
-  const onHover = (evt, hoveredItems) => {
-    if (pointHover && !hoveredItems?.length) {
-      setPointHover(false);
-      if (options.interactions.onPieUnhover) {
-        options.interactions.onPieUnhover(evt);
-      }
-    }
-    if (!pointHover && hoveredItems?.length) {
-      setPointHover(true);
-      if (options.interactions.onPieHover) {
-        const { index, datasetIndex } = hoveredItems[0];
-        const generatedDataset = generatedDatasets;
-        options.interactions.onPieHover(
-          evt,
-          datasetIndex,
-          index,
-          generatedDataset,
-        );
-      }
-    }
-  };
-
-  const getDatalabels = () => {
-    return options.graph.showDataLabels
-      ? {
-          display: 'auto',
-          align: 'center',
-          anchor: 'center',
-          formatter: (value, context) => {
-            if (
-              context.chart.getDatasetMeta(
-                options.graph.stacked ? 0 : context.datasetIndex,
-              ).data[context.dataIndex].hidden
-            )
-              return '';
-            const dataElement = context.dataset.data[context.dataIndex];
-            const label =
-              dataElement?.label ||
-              (typeof dataElement === 'number'
-                ? dataElement
-                : Array.isArray(dataElement)
-                ? dataElement.reduce((acc, curr, i) => {
-                    if (i === 0) return `${acc} ${curr}`;
-                    return `${acc}, ${curr}`;
-                  }, '')
-                : '');
-            const dataLabel =
-              typeof dataElement === 'number'
-                ? Number.isInteger(label)
-                  ? label
-                  : label.toFixed(2)
-                : label;
-            return dataLabel;
-          },
-        }
-      : {
-          display: false,
-        };
-  };
-
-  const getLegend = () => {
-    return {
-      position: options.legend.position,
-      display: options.legend.display,
-      align: options.legend.align,
-      labels: {
-        generateLabels(chartInstance) {
-          if (options.graph.stacked) {
-            const meta = chartInstance.getDatasetMeta(0);
-            if (options.legend.useDataset) {
-              return data.datasets.map((data, i) => {
-                const { label } = data.datasets[i % data.datasets.length];
-                const arc = meta.data[i];
-                const text = arc.hidden
-                  ? label.split('').reduce((acc, curr) => acc + '-', '')
-                  : label;
-                const backgroundColor = data.datasets[i]?.backgroundColor;
-                const borderColor = data.datasets[i]?.borderColor;
-                return {
-                  text,
-                  fillStyle:
-                    (Array.isArray(backgroundColor)
-                      ? backgroundColor[0]
-                      : backgroundColor) || colors[0] + `${99 - 20 * i}`,
-                  strokeStyle:
-                    (Array.isArray(borderColor)
-                      ? borderColor[0]
-                      : borderColor) || colors[0],
-                  index: i,
-                };
-              });
-            } else {
-              return data.labels.map((data, i) => {
-                const label = data.labels[i];
-                const arc = meta.data[parseInt(i * data.datasets.length)];
-                const text = arc.hidden
-                  ? label.split('').reduce((acc, curr) => acc + '-', '')
-                  : label;
-                const backgroundColor = data.datasets[0]?.backgroundColor;
-                const borderColor = data.datasets[0]?.borderColor;
-                return {
-                  text,
-                  fillStyle:
-                    (Array.isArray(backgroundColor)
-                      ? backgroundColor[i % backgroundColor.length]
-                      : backgroundColor) || colors[i] + '99',
-                  strokeStyle:
-                    (Array.isArray(borderColor)
-                      ? borderColor[i % backgroundColor.length]
-                      : borderColor) || colors[i],
-                  index: i,
-                };
-              });
-            }
-          }
-          if (options.legend.useDataset) {
-            return data.datasets.map((dataset, i) => {
-              const meta = chartInstance.getDatasetMeta(i);
-              const text = meta.hidden
-                ? dataset.label.split('').reduce((acc, curr) => acc + '-', '')
-                : dataset.label;
-              const backgroundColor = data.datasets[i]?.backgroundColor;
-              const borderColor = data.datasets[i]?.borderColor;
-              return {
-                text,
-                fillStyle:
-                  (Array.isArray(backgroundColor)
-                    ? backgroundColor[0]
-                    : backgroundColor) || colors[0] + `${99 - 20 * i}`,
-                strokeStyle:
-                  (Array.isArray(borderColor) ? borderColor[0] : borderColor) ||
-                  colors[0],
-                index: i,
-              };
-            });
-          } else {
-            return data.labels.map((label, i) => {
-              const meta = chartInstance.getDatasetMeta(0);
-              const arc = meta.data[i];
-              const text = arc.hidden
-                ? label.split('').reduce((acc, curr) => acc + '-', '')
-                : label;
-              const backgroundColor = data.datasets[0]?.backgroundColor;
-              const borderColor = data.datasets[0]?.borderColor;
-              return {
-                text,
-                fillStyle:
-                  (Array.isArray(backgroundColor)
-                    ? backgroundColor[i % backgroundColor.length]
-                    : backgroundColor) || colors[i] + '99',
-                strokeStyle:
-                  (Array.isArray(borderColor)
-                    ? borderColor[i % backgroundColor.length]
-                    : borderColor) || colors[i],
-                index: i,
-              };
-            });
-          }
-        },
-        boxHeight: 6,
-        boxWidth: 6,
-        usePointStyle: true,
-        filter: (item, data) => {
-          if (!options.legend.useDataset) return true;
-          return !data.datasets[item.index]?.hideLegend;
-        },
-      },
-      onClick: legendClick,
-    };
-  };
-
-  const getToolTips = () => {
-    return {
-      callbacks: {
-        title: (tooltipItem) => {
-          const { dataIndex } = tooltipItem[0];
-          const index = options.graph.stacked
-            ? parseInt(dataIndex / data.labels.length)
-            : dataIndex;
-          const label = data.labels[index];
-          return `${label}`;
-        },
-        label: (tooltipItem) => {
-          const { dataIndex } = tooltipItem;
-          const datasetIndex = options.graph.stacked
-            ? dataIndex % data.datasets.length
-            : tooltipItem.datasetIndex;
-          const dataLabel =
-            data.datasets.length > 1
-              ? `${data.datasets[datasetIndex]?.label}: `
-              : '';
-          const value = tooltipItem.dataset.data[dataIndex];
-          const labelValue =
-            typeof value === 'object'
-              ? `${value.value || ''} ${
-                  options.tooltip.showLabelsInTooltips && value.label
-                    ? '(' + value.label + ')'
-                    : ''
-                }`
-              : value;
-          const unit = data?.yUnit ? `[${data?.yUnit}]` : '';
-          const formattedValue =
-            Math.abs(labelValue) < 1
-              ? roundNumberToPrecision(labelValue, { n: 3 })
-              : round(labelValue, 3);
-
-          return `${dataLabel} ${formattedValue} ${unit}`;
-        },
-      },
-    };
-  };
-  return (
-    <div
-      className={cx(
-        styles.chart,
-        !options.chartStyling.width || !options.chartStyling.height
-          ? options.chartStyling.staticChartHeight
-            ? styles.fixedHeight
-            : styles.stretchHeight
-          : '',
-      )}
-      style={{
-        width: options.chartStyling.width || 'auto',
-        height: options.chartStyling.height || 'auto',
-      }}
-      data-testid={testId}
-    >
-      <Pie
-        ref={chartRef}
-        data={{
-          datasets: generatedDatasets,
-          labels: options.graph.stacked ? undefined : data.labels,
-        }}
-        options={{
-          cutout: options.graph.cutout,
-          onClick,
-          responsive: true, // Defaults to true, should be removed
-          maintainAspectRatio: options.chartStyling.maintainAspectRatio,
-          animation: options.chartStyling.performanceMode
-            ? false
-            : {
-                duration: ANIMATION_DURATION.FAST,
-              },
-          hover: {
-            mode: 'nearest',
-            intersect: 'true',
-          },
-          onHover,
-          elements: {
-            pie: {
-              pointStyle: 'circle',
-            },
-          },
-          plugins: {
-            annotation: false, // Disable globally-registered annotation plugin
-            title: getTitle(),
-            datalabels: getDatalabels(),
-            // zoom: {
-            //   pan: {
-            //     enabled: ,
-            //     mode: ,
-            //   },
-            //   zoom: {
-            //     drag: {
-            //       enabled:,
-            //     },
-            //     mode: ,
-            //     speed: ,
-            //   },
-            // },
-            tooltip: getToolTips(),
-            legend: getLegend(),
-          },
-        }}
-      />
-    </div>
-  );
-};
-
-PieChart.propTypes = PieChartPropTypes;
-
-export { PieChart };

package/src/components/pie-chart/pie-chart.module.less

@@ -1,61 +0,0 @@
-html[data-theme='dark'] .chart canvas {
-  // Flip chart colors if dark mode enabled
-  filter: invert(1) hue-rotate(180deg);
-}
-
-.chart {
-  border: 1px solid rgba(255, 255, 255, 0);
-  padding-top: 10px;
-  position: relative;
-
-  canvas {
-    width: 100% !important; // Fix for resizing bug
-    height: 100% !important; // Remove if stretched when maintainAspectRatio=true
-  }
-
-  &.fixedHeight {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    height: auto;
-  }
-
-  &.stretchHeight {
-    display: flex;
-    align-items: stretch;
-    justify-content: stretch;
-    height: 100%;
-  }
-
-  &:focus {
-    border: 1px solid #85b7d9;
-    outline: none; // Remove dotted outline on FF
-  }
-
-  &::-moz-focus-inner {
-    border: 0; // Remove dotted outline on FF
-  }
-}
-
-.zoomForm {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  right: 0;
-
-  .zoomReset {
-    margin-left: 10px;
-  }
-
-  .help {
-    margin-left: 5px;
-    line-height: 0; // Strip whitespace from icon
-  }
-}
-
-.autoWeight {
-  width: 'auto';
-  height: 'auto';
-}

package/src/components/scatter-chart/scatter-chart.intefrace.ts

@@ -1,33 +0,0 @@
-import { IChartPlugins } from "../../helpers/chart-interface";
-
-export interface IScatterChartOptions {
-  responsive: boolean;
-  maintainAspectRatio: boolean;
-  plugins: IChartPlugins;
-}
-
-export interface IScatterChartPoint {
-  x: number | string;
-  y: number | string;
-  label?: string;
-}
-
-export interface IScatterChartDataset {
-  label: string;
-  data: IScatterChartPoint[];
-  borderColor: string;
-  backgroundColor: string;
-  showLine: Boolean
-}
-
-export interface IScatterChartData {
-  testId: string | null;
-  data: {
-      datasets: IScatterChartDataset[]
-  };
-  options: IScatterChartOptions;
-}
-
-export interface IScatterChartProps {
-  chart: IScatterChartData;
-}

package/src/components/scatter-chart/scatter-chart.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Scatter } from 'react-chartjs-2';
-
-import { setDefaultTheme } from '../../helpers/chart-utils';
-import styles from './scatter-chart.module.less';
-
-/**
- *
- * @param {import('./scatter-chart.intefrace').IScatterChartProps} props
- */
-const ScatterChart = (props) => {
-  setDefaultTheme();
-  const { data, options, testId = null } = props.chart;
-  return (
-    <div className={styles.chart}>
-      <Scatter options={options} data={data} data-testid={testId} />
-    </div>
-  );
-};
-
-export default ScatterChart;

package/src/components/scatter-chart/scatter-chart.module.less

@@ -1,4 +0,0 @@
-html[data-theme='dark'] .chart canvas {
-  // Flip chart colors if dark mode enabled
-  filter: invert(1) hue-rotate(180deg);
-}

package/src/helpers/chart-border-plugin.js

@@ -1,19 +0,0 @@
-/**
- * Chart border plugin config
- */
-export const chartAreaBorderPlugin = {
-  id: 'chartAreaBorder',
-  beforeDraw(chart, args, options) {
-    const {
-      ctx,
-      chartArea: { left, top, width, height },
-    } = chart;
-    ctx.save();
-    ctx.strokeStyle = options.borderColor;
-    ctx.lineWidth = options.borderWidth;
-    ctx.setLineDash(options.borderDash || []);
-    ctx.lineDashOffset = options.borderDashOffset;
-    ctx.strokeRect(left, top, width, height);
-    ctx.restore();
-  },
-};

package/src/helpers/chart-consts.js

@@ -1,64 +0,0 @@
-export const BORDER_WIDTH = {
-  INITIAL: 2,
-  HOVERED: 6,
-};
-export const BORDER_COLOR = 'rgba(0,0,0,0.1)';
-
-export const ANNOTATION_DASH = [10, 2];
-export const DEFAULT_FONT_SIZE = 13;
-export const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
-export const DEFAULT_COLOR = 'rgba(0,0,0,.87)';
-export const LEGEND_LABEL_BOX_SIZE = 6;
-
-export const LOGARITHMIC_STEPS = [1, 10, 100, 1000, 10000];
-
-export const COLORS = [
-  '#3366cc',
-  '#dc3912',
-  '#ff9900',
-  '#109618',
-  '#990099',
-  '#0099c6',
-  '#dd4477',
-  '#66aa00',
-  '#b82e2e',
-  '#316395',
-  '#994499',
-  '#22aa99',
-  '#aaaa11',
-  '#6633cc',
-  '#e67300',
-  '#8b0707',
-  '#651067',
-  '#329262',
-  '#5574a6',
-  '#3b3eac',
-];
-
-/**
- * @type {string}
- * @desc equivalent of 0.6 rgba alpha chanel
- */
-export const ALPHA_CHANEL = '99';
-
-/**
- * @type {number}
- * @desc #FFFFFF as decimal number
- */
-export const WHITE_COLOR_AS_DECIMAL = 16777215;
-
-export const AUTO = 'auto';
-
-export const ANIMATION_DURATION = {
-  NO: 0,
-  SLOW: 400,
-  FAST: 1000,
-};
-
-export const DEFAULT_CHART_NAME = 'new_chart';
-
-export const CUSTOM_LEGEND_PLUGIN_NAME = 'htmlLegend';
-
-export const DECIMAL_POINT_TOLERANCE = 9;
-
-export const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;