@oliasoft-open-source/charts-library 2.5.15 → 2.5.16-0

package/package.json

@@ -1,15 +1,8 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.15",
+  "version": "2.5.16-0",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
-  "files": [
-    "index.js",
-    "LICENSE",
-    "README.md",
-    "release-notes.md",
-    "src/*"
-  ],
   "scripts": {
     "build": "yarn run build:storybook",
     "build:storybook": "build-storybook --quiet --output-dir ./public",

package/src/components/bar-chart/bar-chart.stories.jsx

@@ -1,454 +0,0 @@
-import React from 'react';
-import { BarChart } from './bar-chart';
-import { getCustomLegendPlugin } from '../../helpers/get-custom-legend-plugin-example';
-
-const labels1 = ['label 1', 'label 2', 'label 3'];
-const dataset1_1a = { label: 'data1', data: [3, 8, 7] };
-const dataset1_2a = { label: 'data2', data: [1, 2, 3] };
-const dataset1_3a = { label: 'data3', data: [5, 0, 4] };
-
-const dataset1_1b = { label: 'data1', data: [3, 8, 7], yAxisID: 'y1' };
-const dataset1_2b = { label: 'data2', data: [1, 2, 3], yAxisID: 'y2' };
-const dataset1_3b = { label: 'data3', data: [5, 0, 4], yAxisID: 'y2' };
-
-const dataset1_1c = { label: 'data1', data: [3, 8, 7], stack: 1 };
-const dataset1_2c = { label: 'data2', data: [1, 2, 3], stack: 1 };
-const dataset1_3c = { label: 'data3', data: [5, 0, 4], stack: 2 };
-
-const annotationDataset = { label: 'data', data: [42, 57, 64] };
-
-const datasetNoDataLabels = {
-  label: 'data',
-  data: [210, 333, 248],
-};
-
-const singleChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-};
-
-const multipleBarData = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
-  },
-};
-
-const stakedBarData = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
-  },
-  options: {
-    title: 'Stacked',
-    additionalAxesOptions: {
-      stacked: true,
-    },
-  },
-};
-
-const multipleAxisData = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1b, dataset1_2b, dataset1_3b],
-  },
-  options: {
-    title: 'Multiple y axes',
-    axes: {
-      y: [
-        {},
-        {
-          gridLines: {
-            drawOnChartArea: false,
-          },
-        },
-      ],
-    },
-  },
-};
-
-const groupedStacked = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1c, dataset1_2c, dataset1_3c],
-  },
-  options: {
-    title: 'Grouped stacked',
-    additionalAxesOptions: {
-      stacked: true,
-    },
-  },
-};
-
-const reversed = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'reversed vertical',
-    additionalAxesOptions: {
-      reverse: true,
-    },
-  },
-};
-const horizontal = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'horizontal',
-    direction: 'horizontal',
-  },
-};
-const horizontalReversed = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'reversed horizontal',
-    direction: 'horizontal',
-    additionalAxesOptions: {
-      reverse: true,
-    },
-  },
-};
-
-const axesWithLabels = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'With axes labels',
-    axes: {
-      x: [
-        {
-          label: 'x axis',
-        },
-      ],
-      y: [
-        {
-          label: 'y axis',
-        },
-      ],
-    },
-  },
-};
-
-const axisPosition = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: ['x axis on top', 'y axis on right'],
-    axes: {
-      x: [
-        {
-          position: 'top',
-        },
-      ],
-      y: [
-        {
-          position: 'right',
-        },
-      ],
-    },
-  },
-};
-
-const notBeginAtZero = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'Not beginning at zero',
-    additionalAxesOptions: {
-      beginAtZero: false,
-    },
-  },
-};
-
-const stepSizeChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'With step size of 2',
-    additionalAxesOptions: {
-      stepSize: 2,
-    },
-  },
-};
-
-const suggestedRange = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'With suggested range',
-    additionalAxesOptions: {
-      beginAtZero: false,
-      suggestedMin: 2,
-      suggestedMax: 12,
-    },
-  },
-};
-
-const logartihmicChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'With logarithmic scale',
-    additionalAxesOptions: {
-      chartScaleType: 'logarithmic',
-    },
-  },
-};
-
-const dataLabelsNumberChart = {
-  data: {
-    labels: labels1,
-    datasets: [datasetNoDataLabels],
-  },
-  options: {
-    title: 'With value as datalabels',
-    graph: {
-      showDataLabels: true,
-    },
-  },
-};
-
-const horizontalAnnotationChart = {
-  data: {
-    labels: labels1,
-    datasets: [annotationDataset],
-  },
-  options: {
-    title: 'Annotation Y Axis',
-    annotations: {
-      showAnnotations: true,
-      annotationsData: [
-        {
-          annotationAxis: 'y',
-          label: 'Horizontal Annotation',
-          value: 53,
-          color: 'rgba(96, 32, 196, 0.5)',
-        },
-      ],
-    },
-  },
-};
-const verticalAnnotationChart = {
-  data: {
-    labels: labels1,
-    datasets: [annotationDataset],
-  },
-  options: {
-    title: 'Annotation X Axis',
-    annotations: {
-      showAnnotations: true,
-      annotationsData: [
-        {
-          annotationAxis: 'x',
-          label: 'Vertical Annotation',
-          value: 0.5,
-          color: 'green',
-        },
-      ],
-    },
-  },
-};
-
-const diagonalAnnotationChart = {
-  data: {
-    labels: labels1,
-    datasets: [annotationDataset],
-  },
-  options: {
-    title: 'Diagonal Annotation',
-    annotations: {
-      showAnnotations: true,
-      annotationsData: [
-        {
-          annotationAxis: 'y',
-          label: 'Diagonal Annotation',
-          value: 40,
-          endValue: 67,
-          color: 'rgba(123, 16, 32, 0.8)',
-        },
-      ],
-    },
-  },
-};
-
-const controlAnnotationChart = {
-  data: {
-    labels: labels1,
-    datasets: [annotationDataset],
-  },
-  options: {
-    title: 'Control annotations in legend',
-    annotations: {
-      showAnnotations: true,
-      controlAnnotation: true,
-      annotationsData: [
-        {
-          annotationAxis: 'y',
-          label: 'Diagonal Annotation',
-          value: 40,
-          endValue: 67,
-          color: 'rgba(123, 16, 32, 0.8)',
-        },
-        {
-          annotationAxis: 'y',
-          label: 'Horizontal Annotation',
-          value: 53,
-          color: 'rgba(96, 32, 196, 0.5)',
-        },
-      ],
-    },
-  },
-};
-
-const legendRight = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'Legend to the right',
-    legend: {
-      position: 'right',
-    },
-  },
-};
-
-const animatedChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    chartStyling: { performanceMode: false },
-  },
-};
-
-export default {
-  title: 'BarChart',
-  component: BarChart,
-  args: {
-    chart: singleChart,
-  },
-};
-
-const Template = (args) => {
-  return (
-    <BarChart
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...args}
-    />
-  );
-};
-
-const customLegendContainerID = 'custom-legend-container';
-
-const TemplateWithCustomLegendContainer = (args) => {
-  return (
-    <>
-      <BarChart
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...args}
-      />
-      <div id={customLegendContainerID}></div>
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-
-export const MultipleSets = Template.bind({});
-MultipleSets.args = { chart: multipleBarData };
-
-export const Stacked = Template.bind({});
-Stacked.args = { chart: stakedBarData };
-
-export const StackedGrouped = Template.bind({});
-StackedGrouped.args = { chart: groupedStacked };
-
-export const MultipleYAxes = Template.bind({});
-MultipleYAxes.args = { chart: multipleAxisData };
-
-export const Horizontal = Template.bind({});
-Horizontal.args = { chart: horizontal };
-
-export const Reversed = Template.bind({});
-Reversed.args = { chart: reversed };
-
-export const HorizontalReversed = Template.bind({});
-HorizontalReversed.args = { chart: horizontalReversed };
-
-export const AxesLabels = Template.bind({});
-AxesLabels.args = { chart: axesWithLabels };
-
-export const AxesPositions = Template.bind({});
-AxesPositions.args = { chart: axisPosition };
-
-export const NonZeroStart = Template.bind({});
-NonZeroStart.args = { chart: notBeginAtZero };
-
-export const CustomRange = Template.bind({});
-CustomRange.args = { chart: suggestedRange };
-
-export const CustomStepSize = Template.bind({});
-CustomStepSize.args = { chart: stepSizeChart };
-
-export const LogarithmicScale = Template.bind({});
-LogarithmicScale.args = { chart: logartihmicChart };
-
-export const Datalabels = Template.bind({});
-Datalabels.args = { chart: dataLabelsNumberChart };
-
-export const LegendOnRight = Template.bind({});
-LegendOnRight.args = { chart: legendRight };
-
-export const AnnotationYAxis = Template.bind({});
-AnnotationYAxis.args = { chart: horizontalAnnotationChart };
-
-export const AnnotationXAxis = Template.bind({});
-AnnotationXAxis.args = { chart: verticalAnnotationChart };
-
-export const AnnotationDiagonal = Template.bind({});
-AnnotationDiagonal.args = { chart: diagonalAnnotationChart };
-
-export const AnnotationsInLegend = Template.bind({});
-AnnotationsInLegend.args = { chart: controlAnnotationChart };
-
-export const Animated = Template.bind({});
-Animated.args = { chart: animatedChart };
-
-export const CustomLegend = TemplateWithCustomLegendContainer.bind({});
-CustomLegend.args = {
-  chart: {
-    ...singleChart,
-    options: {
-      title: 'Custom HTML legend',
-      legend: {
-        customLegend: {
-          customLegendPlugin: getCustomLegendPlugin(customLegendContainerID),
-          customLegendContainerID,
-        },
-      },
-    },
-  },
-};

package/src/components/line-chart/datalabels-alignment/__tests__/get-alignment-condition.test.js

@@ -1,36 +0,0 @@
-import { getCondition } from '../get-alignment-condition';
-
-describe('Datalabels alignment condition', () => {
-  test('should return overLeftSide = true', () => {
-    const result = getCondition(36, 325, 36, 1204, 325);
-    expect(result).toStrictEqual({
-      overLeftSide: true,
-      overRightSide: false,
-      overBottomSide: true,
-    });
-  });
-  test('should return overRightSide = true', () => {
-    const result = getCondition(1200, 325, 36, 1204, 325);
-    expect(result).toStrictEqual({
-      overLeftSide: false,
-      overRightSide: true,
-      overBottomSide: false,
-    });
-  });
-  test('should return overBottomSide = true', () => {
-    const result = getCondition(457, 250, 36, 1204, 325);
-    expect(result).toStrictEqual({
-      overLeftSide: false,
-      overRightSide: false,
-      overBottomSide: true,
-    });
-  });
-  test('should return all false', () => {
-    const result = getCondition(789, 100, 36, 1204, 325);
-    expect(result).toStrictEqual({
-      overLeftSide: false,
-      overRightSide: false,
-      overBottomSide: false,
-    });
-  });
-});

package/src/components/line-chart/datalabels-alignment/__tests__/get-alignment-data.test.js

@@ -1,29 +0,0 @@
-import { getAlignmentData } from '../get-alignment-data';
-
-const mockedContext = {
-  chart: {
-    chartArea: {
-      left: 36,
-      right: 1204,
-      bottom: 325,
-    },
-    getDatasetMeta: jest.fn(),
-  },
-  dataIndex: 0,
-  datasetIndex: 0,
-};
-
-describe('Datalabels alignment data', () => {
-  test('should return destructured data from context', () => {
-    const result = getAlignmentData(mockedContext);
-    expect(result).toEqual(
-      expect.objectContaining({
-        x: null,
-        y: null,
-        left: 36,
-        right: 1204,
-        bottom: 325,
-      }),
-    );
-  });
-});

package/src/components/line-chart/datalabels-alignment/__tests__/get-datalabels-position.test.js

@@ -1,21 +0,0 @@
-import { getPosition } from '../get-datalabels-position';
-
-const mockedContext = {
-  chart: {
-    chartArea: {
-      left: 36,
-      right: 1204,
-      bottom: 325,
-    },
-    getDatasetMeta: jest.fn(),
-  },
-  dataIndex: 0,
-  datasetIndex: 0,
-};
-
-describe('Datalabels alignment position', () => {
-  test('should return position', () => {
-    const result = getPosition()(mockedContext);
-    expect(result).toBe('right');
-  });
-});

package/src/components/line-chart/line-chart.minor-gridlines-plugin.test.js

@@ -1,34 +0,0 @@
-import {
-  getLargestMajorTickWidth,
-  getMinorTickPositions,
-  isValidPosition,
-} from './line-chart.minor-gridlines-plugin';
-
-describe('chartMinorGridlinesPlugin', () => {
-  test('getLargestMajorTickWidth', () => {
-    const even = [0, 1, 2, 3];
-    const uneven = [0.85, 1, 2, 2.25];
-    expect(getLargestMajorTickWidth(even)).toBe(1);
-    expect(getLargestMajorTickWidth(uneven)).toBe(1);
-  });
-  test('isValidPosition', () => {
-    const tickPositions = [0, 1, 2, 3];
-    const inBounds = 0.1;
-    const outOfBounds = 3.1;
-    const duplicate = 2;
-    expect(isValidPosition(inBounds, tickPositions)).toBe(true);
-    expect(isValidPosition(outOfBounds, tickPositions)).toBe(false);
-    expect(isValidPosition(duplicate, tickPositions)).toBe(false);
-  });
-  test('getMinorTickPositions', () => {
-    const even = [0, 1, 2, 3];
-    const uneven = [0.85, 1, 2, 2.25];
-    expect(getMinorTickPositions(even)).toStrictEqual([
-      0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6,
-      1.7, 1.8, 1.9, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9,
-    ]);
-    expect(getMinorTickPositions(uneven)).toStrictEqual([
-      0.9, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.1, 2.2,
-    ]);
-  });
-});