@oliasoft-open-source/charts-library 0.0.2-beta-1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Oliasoft AS and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Chart Library
+
+Reusable charts for use in React applications.

package/index.js

@@ -0,0 +1,13 @@
+/*
+ Components
+ */
+
+import ScatterChart from './src/components/scatter-chart/scatter-chart';
+
+export { LineChart } from './src/components/line-chart/line-chart';
+
+export { PieChart } from './src/components/pie-chart/pie-chart';
+
+export { BarChart } from './src/components/bar-chart/bar-chart';
+
+export { ScatterChart };

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@oliasoft-open-source/charts-library",
+  "version": "0.0.2-beta-1",
+  "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
+  "main": "index.js",
+  "scripts": {
+    "build": "yarn run build:storybook",
+    "build:storybook": "build-storybook --quiet --output-dir ./public",
+    "dev:storybook": "start-storybook -p 6006",
+    "preview:storybook": " http-server ./public -o -p 9002 -c-1",
+    "test": "yarn run prettier:check && yarn run lint:check && yarn run test:unit",
+    "test:unit": "jest",
+    "lint:check": "eslint \"**/*.{js,jsx}\"",
+    "lint:fix": "eslint --fix \"**/*.{js,jsx}\"",
+    "prettier:check": "prettier --check \"**/*.{js,jsx,json,css,less}\"",
+    "prettier:fix": "prettier --write \"**/*.{js,jsx,json,css,less}\"",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,jsx,json,css,less}": [
+      "prettier --write"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/oliasoft-open-source/charts-library.git"
+  },
+  "author": "Oliasoft AS and contributors",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/oliasoft-open-source/charts-library/issues"
+  },
+  "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
+  "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-storysource": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/source-loader": "^6.5.10",
+    "@types/react": "^17.0.49",
+    "babel-jest": "^29.0.1",
+    "babel-plugin-webpack-aliases": "^1.1.3",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eslint": "^8.23.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.5.0",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.1",
+    "jest": "^29.0.1",
+    "jest-transform-stub": "^2.0.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
+    "lint-staged": "^13.0.3",
+    "mini-css-extract-plugin": "^2.6.1",
+    "prettier": "2.7.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "storybook-dark-mode": "^1.1.0",
+    "terser-webpack-plugin": "^5.3.6",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.1",
+    "webpack-merge": "^5.8.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0",
+    "react-dom": "^17.0"
+  },
+  "dependencies": {
+    "@oliasoft-open-source/react-ui-library": "^3.1",
+    "chart.js": "^3.9.1",
+    "chartjs-plugin-annotation": "^1.4.0",
+    "chartjs-plugin-datalabels": "^2.1.0",
+    "chartjs-plugin-zoom": "^1.2.1",
+    "classnames": "^2.3.1",
+    "fraction.js": "^4.2.0",
+    "immer": "^9.0.17",
+    "less-vars-to-js": "^1.3.0",
+    "prop-types": "^15.8.1",
+    "react-base64-downloader": "^2.1.7",
+    "react-chartjs-2": "^4.3.1",
+    "react-icons": "^4.4.0"
+  }
+}

package/release-notes.md

@@ -0,0 +1,178 @@
+# Charts Library Release Notes
+
+## 2.6.1
+
+- Added Box and Ellipse annotations ([OW-10519](https://oliasoft.atlassian.net/browse/OW-10519))
+
+## 2.6.0
+
+- Add support for optional `autoAxisPadding` prop, which autoscales 5% padding around data ([OW-10398](https://oliasoft.atlassian.net/browse/OW-10398))
+- Fix bug in default scales when all data points similar values ([OW-4327](https://oliasoft.atlassian.net/browse/OW-4327))
+
+## 2.5.27
+
+- Add guard to useEffect in line-chart
+
+## 2.5.26
+
+- Add guard to getLineChartAxis method
+
+## 2.5.25
+
+- Fix axis ranges updating when new chart data and ranges is passed
+
+## 2.5.24
+
+- Add performance test case
+
+## 2.5.23
+
+- Patch minor regression in axis limits introduced in 2.5.22
+
+## 2.5.22
+
+- Improve UX and input validation for axes range inputs ([OW-10305](https://oliasoft.atlassian.net/browse/OW-10305))
+
+## 2.5.21
+
+- Revert changes from `2.5.12` / [OW-10320](https://oliasoft.atlassian.net/browse/OW-10320)
+- Changing thousands separators broke decimal separators in some locales
+- Resolves [OW-10320](https://oliasoft.atlassian.net/browse/OW-10320)
+
+## 2.5.20
+
+- Minor refactor (code cleanup)
+
+## 2.5.19
+
+- Hide irregular major axis ticks ([OW-10088](https://oliasoft.atlassian.net/browse/OW-10088))
+
+## 2.5.18
+
+- Fixed minor gridlines when last major tick does not reach axis bounds ([OW-10296](https://oliasoft.atlassian.net/browse/OW-10296))
+
+## 2.5.17
+
+- Added some (realistic) test case stories from our app
+
+## 2.5.16
+
+- Remove test artefacts from published package
+
+## 2.5.15
+
+- Changed GUI library version to `^3.1`
+
+## 2.5.14
+
+- Sync axis labels in chart Controls with props
+
+## 2.5.13
+
+- fixed custom range inputs reset, multi-axis range placeholder values missing
+
+## 2.5.12
+
+- change thousand separators in axis label from comma to space
+
+## 2.5.11
+
+- Allow headerComponent and chart title to coexist
+
+## 2.5.10
+
+- Fix zoom / pan bug at < 0.1 scale on charts
+
+## 2.5.9
+
+- Fix validation for two and more decimal places in charts settings
+
+## 2.5.8
+
+- Disable tooltip animations in `performanceMode`
+
+## 2.5.7
+
+- Allow stretchy headerComponent in controls
+
+## 2.5.6
+
+- Removed resizeDelay, fixed double data labels set position
+
+## 2.5.5
+
+- Removed empty label annotations
+
+## 2.5.4
+
+- Fixed onPointHover event
+
+## 2.5.3
+
+- Fixed datalabels position, set labels position inside chart area
+
+## 2.5.2
+
+- Fix crashes when type a non number into the axis range - add validation in getLinechartAxis method
+
+## 2.5.1
+
+- Added resize delay for performance
+
+## 2.5.0
+
+- Separate controls for points/lines, axes options, legend, download
+- Standard control for table
+- Box zoom
+
+## 2.4.6
+
+- Fix Multiple X Axes example in LineChart
+
+## 2.4.5
+
+- Fix zooming issue from OW-9960
+
+## 2.4.4
+
+- Updated GUI Library version
+
+## 2.4.3
+
+- Fix crashes when type a non-number into the axis range OW-9924
+
+## 2.4.2
+
+- Square aspect ratio charts can fill height/width
+
+## 2.4.1
+
+- Remove dependency on http-server (moved to dev dependencies)
+
+## 2.4.0
+
+- Switch package manager from NPM to Yarn
+
+## 2.3.4
+
+- RollBack changes regarding OW-4327
+
+## 2.3.3
+
+- restrict suggestedMin/Max by X axe OW-4327
+
+## 2.3.2
+
+- added default values for axis ticks (suggestedMin/Max) OW-4327
+
+## 2.3.0
+
+- Text annotations in line chart
+
+## 2.2.1
+
+- Support for dark mode
+
+## 2.2.0
+
+- first publish of release notes

package/src/assets/icons/line-and-point.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h12v12h-12z"/></clipPath><g clip-path="url(#a)"><path d="m7.937 6.5c-.11122.42912-.36179.80916-.71237 1.08047-.35058.2713-.78133.4185-1.22463.4185s-.87405-.1472-1.22463-.4185c-.35058-.27131-.60115-.65135-.71237-1.08047h-3.563v-1h3.563c.11122-.42912.36179-.80916.71237-1.08046s.78133-.41851 1.22463-.41851.87405.14721 1.22463.41851.60115.65134.71237 1.08046h3.563v1z" fill="currentColor"/></g></svg>

package/src/assets/icons/line-only.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h12v12h-12z"/></clipPath><g clip-path="url(#a)"><path d="m.5 6.5v-1h11v1c-4.16104 0-6.63549 0-11 0z" fill="currentColor"/></g></svg>

package/src/assets/icons/list-hide.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h12v12h-12z"/></clipPath><g clip-path="url(#a)"><path clip-rule="evenodd" d="m1.85351 1.14645-.35356-.353558-.707103.707108.353553.35355.39645.39645c-.02813.07955-.0429.16401-.0429.25 0 .19891.07902.38968.21967.53033.14066.14065.33142.21967.53033.21967.08599 0 .17045-.01477.25-.04289l2.2929 2.29289h-.7929v1h1.7929l2.5 2.5h-4.2929v1h5.2929l.85355.8536.3536.3535.7071-.7071-.3536-.3536-.3535-.35351v-.79289h-.79294l-2.5-2.5h3.29294v-1h-4.29294l-3.25-3.25c-.03694-.10448-.09692-.20048-.17678-.28033-.07985-.07985-.17585-.13984-.28033-.17678zm8.64649.85355h-6.50005v1h6.50005zm-8.78038 4.53033c.14066.14065.33142.21967.53033.21967.19892 0 .38968-.07902.53033-.21967.14066-.14065.21967-.33142.21967-.53033s-.07901-.38968-.21967-.53033c-.14065-.14065-.33141-.21967-.53033-.21967-.19891 0-.38967.07902-.53033.21967-.14065.14065-.21967.33142-.21967.53033s.07902.38968.21967.53033zm0 3.45c.14066.14067.33142.21967.53033.21967.19892 0 .38968-.079.53033-.21967.14066-.14065.21967-.33142.21967-.53033s-.07901-.38968-.21967-.53033c-.14065-.14065-.33141-.21967-.53033-.21967-.19891 0-.38967.07902-.53033.21967-.14065.14065-.21967.33142-.21967.53033s.07902.38968.21967.53033z" fill="currentColor" fill-rule="evenodd"/></g></svg>

package/src/assets/icons/point-only.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" fill="currentColor" r="2"/></svg>

package/src/components/bar-chart/bar-chart-prop-types.js

@@ -0,0 +1,188 @@
+import PropTypes from 'prop-types';
+
+export const BarChartPropTypes = {
+  chart: PropTypes.shape({
+    testId: PropTypes.string,
+    data: PropTypes.object.isRequired,
+    options: PropTypes.shape({
+      title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+      ]),
+      direction: PropTypes.oneOf(['vertical', 'horizontal']),
+      axes: PropTypes.shape({
+        x: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            position: PropTypes.oneOf(['top', 'bottom']),
+            color: PropTypes.string,
+            unit: PropTypes.string,
+          }),
+        ),
+        y: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            position: PropTypes.oneOf(['left', 'right']),
+            color: PropTypes.string,
+            unit: PropTypes.string,
+          }),
+        ),
+      }),
+      additionalAxesOptions: PropTypes.shape({
+        chartScaleType: PropTypes.oneOf(['linear', 'logarithmic']),
+        reverse: PropTypes.bool,
+        beginAtZero: PropTypes.bool,
+        stepSize: PropTypes.number,
+        stacked: PropTypes.bool,
+        suggestedMin: PropTypes.number,
+        suggestedMax: PropTypes.number,
+        min: PropTypes.number,
+        max: PropTypes.number,
+      }),
+      chartStyling: PropTypes.shape({
+        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        maintainAspectRatio: PropTypes.bool,
+        staticChartHeight: PropTypes.bool,
+        performanceMode: PropTypes.bool,
+      }),
+      tooltip: PropTypes.shape({
+        tooltips: PropTypes.bool,
+        showLabelsInTooltips: PropTypes.bool,
+      }),
+      graph: PropTypes.shape({
+        showDataLabels: PropTypes.bool,
+        showMinorGridlines: PropTypes.bool,
+      }),
+      annotations: PropTypes.shape({
+        showAnnotations: PropTypes.bool,
+        controlAnnotation: PropTypes.bool,
+        annotationsData: PropTypes.arrayOf(
+          PropTypes.shape({
+            annotationAxis: PropTypes.oneOf(['x', 'y']),
+            label: PropTypes.string,
+            color: PropTypes.string,
+            value: PropTypes.number,
+            endValue: PropTypes.number,
+          }),
+        ),
+      }),
+      legend: PropTypes.shape({
+        display: PropTypes.bool,
+        position: PropTypes.oneOf(['top', 'bottom', 'right']),
+        align: PropTypes.oneOf(['start', 'center', 'end']),
+        customLegend: PropTypes.shape({
+          customLegendPlugin: PropTypes.object,
+          customLegendContainerID: PropTypes.string,
+        }),
+      }),
+      chartOptions: PropTypes.shape({
+        enableZoom: PropTypes.bool,
+        enablePan: PropTypes.bool,
+      }),
+      interactions: PropTypes.shape({
+        onLegendClick: PropTypes.func,
+        onBarHover: PropTypes.func,
+        onBarUnhover: PropTypes.func,
+      }),
+    }),
+  }).isRequired,
+};
+
+export const getDefaultProps = (props) => {
+  // Add missing nested objects
+  props.chart.options = props.chart.options || {};
+  props.chart.options.axes = props.chart.options.axes || {};
+  props.chart.options.additionalAxesOptions =
+    props.chart.options.additionalAxesOptions || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.annotations = props.chart.options.annotations || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend
+    .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  // Set defaults for missing properties
+  const chart = {
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
+    options: {
+      title: props.chart.options.title || '',
+      direction: props.chart.options.direction || 'vertical',
+      axes: {
+        x: props.chart.options.axes.x || [{}],
+        y: props.chart.options.axes.y || [{}],
+      },
+      additionalAxesOptions: {
+        chartScaleType:
+          props.chart.options.additionalAxesOptions.chartScaleType || 'linear',
+        reverse: props.chart.options.additionalAxesOptions.reverse || false,
+        stacked: props.chart.options.additionalAxesOptions.stacked || false,
+        beginAtZero:
+          props.chart.options.additionalAxesOptions.beginAtZero != null
+            ? props.chart.options.additionalAxesOptions.beginAtZero
+            : true,
+        stepSize: props.chart.options.additionalAxesOptions.stepSize,
+        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
+        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
+        min: props.chart.options.additionalAxesOptions.min,
+        max: props.chart.options.additionalAxesOptions.max,
+      },
+      chartStyling: {
+        width: props.chart.options.chartStyling.width,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio:
+          props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight:
+          props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode:
+          props.chart.options.chartStyling.performanceMode != null
+            ? props.chart.options.chartStyling.performanceMode
+            : true,
+      },
+      tooltip: {
+        tooltips:
+          props.chart.options.tooltip.tooltips != null
+            ? props.chart.options.tooltip.tooltips
+            : true,
+        showLabelsInTooltips:
+          props.chart.options.tooltip.showLabelsInTooltips || false,
+      },
+      graph: {
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        showMinorGridlines:
+          props.chart.options.graph.showMinorGridlines || false,
+      },
+      annotations: {
+        showAnnotations:
+          props.chart.options.annotations.showAnnotations != null
+            ? props.chart.options.annotations.showAnnotations
+            : true,
+        controlAnnotation:
+          props.chart.options.annotations.controlAnnotation || false,
+        annotationsData: props.chart.options.annotations.annotationsData || [],
+      },
+      legend: {
+        display:
+          props.chart.options.legend.display != null
+            ? props.chart.options.legend.display
+            : true,
+        position: props.chart.options.legend.position || 'bottom',
+        align: props.chart.options.legend.align || 'center',
+        customLegend: props.chart.options.legend.customLegend,
+      },
+      chartOptions: {
+        enableZoom: props.chart.options.chartOptions.enableZoom || false,
+        enablePan: props.chart.options.chartOptions.enablePan || false,
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onBarHover: props.chart.options.interactions.onBarHover,
+        onBarUnhover: props.chart.options.interactions.onBarUnhover,
+      },
+    },
+  };
+  return chart;
+};

package/src/components/bar-chart/bar-chart.interface.ts

@@ -0,0 +1,84 @@
+import {IChartAnnotations, IChartInteractions, IChartLegend, IChartStyling} from "../../helpers/chart-interface";
+
+export interface IChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+
+export interface IBarChartGraph {
+    showDataLabels: boolean;
+    showMinorGridlines: boolean;
+}
+
+export interface IBarChartTooltip {
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+}
+
+export interface IBarChartAdditionalAxesOptions {
+    chartScaleType: 'linear' | 'logarithmic';
+    reverse: boolean;
+    beginAtZero: boolean;
+    stepSize: number;
+    stacked: boolean;
+    suggestedMin: number;
+    suggestedMax:number;
+    min: number;
+    max: number;
+}
+
+export interface IBarChartAxes<PositionType> {
+    label: string;
+    position: PositionType;
+    color: string;
+    unit: string;
+}
+
+export interface IBarChartOptions {
+    title: string | string[];
+    direction: 'vertical' | 'horizontal';
+    axes: {
+        x: IBarChartAxes<'top' | 'bottom'>[];
+        y: IBarChartAxes<'left' | 'right'>[];
+    };
+    additionalAxesOptions: IBarChartAdditionalAxesOptions;
+    chartStyling: IChartStyling;
+    tooltip: IBarChartTooltip;
+    graph: IBarChartGraph;
+    annotations: IChartAnnotations;
+    legend: IChartLegend;
+    chartOptions: IChartOptions;
+    interactions: IChartInteractions;
+}
+
+export interface IBarDataPoint {
+    x: number;
+    y: number;
+    label?: string;
+}
+
+export interface IBarChartDataset {
+    label?: string;
+    data: number[] | number[][] | IBarDataPoint[];
+    borderSkipped?: string;
+    backgroundColor?: string[];
+    borderColor?: string[];
+    borderRadius?: number;
+    borderWidth?: number;
+    yAxisID?: string;
+    stack?: number;
+}
+
+export interface IBarChartData {
+    //TODO: revisit data interface definition after project is more stable
+    testId: string | null;
+    data: {
+        labels?: string[],
+        datasets: IBarChartDataset[]
+    } | any;
+    options: IBarChartOptions;
+}
+
+export interface IBarChartProps {
+    chart: IBarChartData;
+}