@oliasoft-open-source/charts-library 2.0.0

package/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+public

package/.eslintrc.js

@@ -0,0 +1,129 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    jest: true,
+  },
+  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['~components', './src/components'],
+          ['~docs', './src/docs'],
+          ['~helpers', './src/helpers'],
+          ['~style', './src/style'],
+          ['~vendor', './src/vendor'],
+        ],
+        extensions: ['.js', '.jsx'],
+      },
+    },
+  },
+  rules: {
+    'arrow-parens': 0,
+    'array-callback-return': 0,
+    camelcase: 0,
+    'comma-dangle': 0,
+    'consistent-return': 0,
+    curly: 0,
+    'class-methods-use-this': 0,
+    'default-case': 0,
+    eqeqeq: 0,
+    'eol-last': 0,
+    'function-paren-newline': 0,
+    'max-len': 0,
+    'import/extensions': 0,
+    'import/prefer-default-export': 0,
+    'object-curly-newline': 0,
+    'object-curly-spacing': 0,
+    'one-var-declaration-per-line': 0,
+    'one-var': 0,
+    radix: 0,
+    'prefer-template': 0,
+    'prefer-const': 0,
+    'prefer-destructuring': [
+      'error',
+      {
+        VariableDeclarator: {
+          array: false,
+          object: true,
+        },
+        AssignmentExpression: {
+          array: false,
+          object: false,
+        },
+      },
+      {
+        enforceForRenamedProperties: false,
+      },
+    ],
+    'spaced-comment': 0,
+    'no-multi-spaces': 0,
+    'arrow-body-style': 0,
+    'no-shadow': 0,
+    'no-else-return': 0,
+    'no-param-reassign': 0,
+    'no-plusplus': 0,
+    'no-restricted-globals': 0,
+    'no-unused-vars': 0,
+    'no-unused-state': 0,
+    'no-case-declarations': 0,
+    'no-return-assign': 0,
+    'no-prototype-builtins': 0,
+    'no-restricted-syntax': 0,
+    'no-cond-assign': [2, 'except-parens'],
+    'no-console': 0,
+    'no-constant-condition': 0,
+    'no-underscore-dangle': 0,
+    'no-restricted-properties': 0,
+    'no-nested-ternary': 0,
+    'no-mixed-operators': 0,
+    'no-confusing-arrow': 0,
+    'no-lonely-if': 0,
+    'nonblock-statement-body-position': 0,
+    'react/jsx-tag-spacing': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/no-array-index-key': 0,
+    'react/forbid-prop-types': 0,
+    'react/destructuring-assignment': 0,
+    'react/no-unused-state': 0,
+    'react/no-access-state-in-setstate': 0,
+    'react/no-did-update-set-state': 0,
+    'react/prop-types': 0,
+    'react/self-closing-comp': [
+      'error',
+      {
+        component: true,
+        html: false,
+      },
+    ],
+    'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/tabindex-no-positive': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/label-has-for': 0,
+    'react/function-component-definition': [
+      2,
+      { namedComponents: 'arrow-function' },
+    ],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: [
+          'src/components/**/*.stories.{js,jsx}',
+          'webpack/**/*.js',
+        ],
+      },
+    ],
+  },
+};

package/.gitlab-ci.yml

@@ -0,0 +1,77 @@
+image: node:18
+
+stages:
+  - test
+  - release
+
+default:
+  tags:
+    - oliasoft
+    - kubernetes
+
+test:
+  stage: test
+  only:
+    - merge_requests
+  script:
+    - npm install --progress=false --no-save
+    - npm run build
+    - npm run test
+
+cache:
+  paths:
+    - node_modules/
+    - public/
+
+# Publish the Storybook to Gitlab pages upon merge to master
+pages:
+  stage: release
+  only:
+    - master
+  script:
+    - npm install --progress=false --no-save
+    - npm run build
+  artifacts:
+    paths:
+      - public
+
+# Push a tag and publish the release to the public NPM registry upon merge to master
+# Loosely inspired by:
+# - https://markswanderingthoughts.nl/tagging-in-gitlab-ci-pipeline-using-deploy-keys/
+# - https://www.garybell.co.uk/creating-a-release-with-gitlab-ci-and-composer/
+publish:
+  stage: release
+  only:
+    - master
+  script:
+    # Get the version from package.json
+    - VERSION=$(node -p "require('./package.json').version")
+    # Prepare .npmrc
+    - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
+    # Configure git
+    - mkdir -p ~/.ssh
+    - echo "$SSH_PRIVATE_KEY_TOOLKIT" > ~/.ssh/id_rsa; chmod 0600 ~/.ssh/id_rsa
+    - echo "StrictHostKeyChecking no " > /root/.ssh/config
+    - git config --global http.sslVerify false
+    - git config --global user.email "$GITLAB_USER_EMAIL"
+    - git config --global user.name "🤖 GitLab CI/CD"
+    - echo "setting origin remote to 'git@$CI_SERVER_HOST:$CI_PROJECT_PATH.git'"
+    - git remote rm origin
+    - git remote add origin git@$CI_SERVER_HOST:$CI_PROJECT_PATH.git
+    - git fetch --quiet
+    - git checkout "$CI_BUILD_REF_NAME"
+    # Only complete pipeline if version does not already exist
+    - >
+      if [ $(git tag -l "$VERSION") ]; then
+        echo "Version $VERSION already exists"
+        exit 1
+      else
+        # Tag a release in gitlab
+        echo "Tagging release in git"
+        git tag $VERSION -m "🤖 Tagged by Gitlab CI/CD Pipeline" -m "For further reference see $CI_PIPELINE_URL" -m "[skip ci]"
+        echo "Pushing tag to remote repository"
+        git push origin $VERSION --no-verify
+        # Publish the NPM package to the public NPM registry
+        echo "Publishing package to NPM registry"
+        npm publish
+      fi

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+public
+dist

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package/.storybook/main.js

@@ -0,0 +1,40 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const getRules = require('../webpack/webpack.common.rules.js');
+const resolve = require('../webpack/webpack.resolve.js').resolve;
+
+module.exports = {
+  stories: ['../src/components/**/*.stories.@(js|jsx|mdx)'],
+  addons: [
+    '@storybook/addon-actions/register',
+    '@storybook/addon-links/register',
+    '@storybook/addon-storysource',
+    '@storybook/addon-docs',
+  ],
+  core: {
+    builder: 'webpack5',
+  },
+  webpackFinal: (config) => {
+    const rules = getRules('development');
+
+    config.module.rules = []; //delete default storybook rules because they conflict (postcss causes a conflict)
+
+    rules.forEach((r) => {
+      config.module.rules.push(r);
+    });
+
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: [...rules], //attach our own rules from the application webpack config
+      },
+      plugins: [
+        ...config.plugins,
+        new MiniCssExtractPlugin({
+          filename: '[name].css',
+        }),
+      ],
+      resolve,
+    };
+  },
+};

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,5 @@
+# React UI Library
+
+React UI Library is a collection of reusable UI components for use in React applications.
+
+For usage instructions and technical documentation, see the [Wiki](https://gitlab.com/oliasoft-open-source/react-ui-library/wikis/home).

package/babel.config.js

@@ -0,0 +1,29 @@
+module.exports = (api) => {
+  api.cache(true);
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          browsers: ['defaults'],
+        },
+        useBuiltIns: 'usage',
+        corejs: 3,
+      },
+    ],
+    '@babel/preset-react',
+  ];
+
+  const plugins = [
+    [
+      'babel-plugin-webpack-aliases',
+      { config: './webpack/webpack.resolve.js' },
+    ],
+  ];
+
+  return {
+    presets,
+    plugins,
+  };
+};

package/index.js

@@ -0,0 +1,9 @@
+/*
+ Components
+ */
+
+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';

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+  },
+  moduleFileExtensions: ['js', 'jsx'],
+  moduleDirectories: ['node_modules'],
+};

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@oliasoft-open-source/charts-library",
+  "version": "2.0.0",
+  "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run build:storybook",
+    "build:storybook": "build-storybook --quiet --output-dir ./public/storybook",
+    "dev:storybook": "start-storybook -p 6006",
+    "test": "npm run prettier:check && npm run lint:check && npm 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",
+    "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",
+    "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": "^2.2.2",
+    "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",
+    "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/src/components/bar-chart/bar-chart-prop-types.js

@@ -0,0 +1,181 @@
+import PropTypes from 'prop-types';
+
+export const BarChartPropTypes = {
+  chart: PropTypes.shape({
+    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,
+        darkMode: 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']),
+      }),
+      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.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  // Set defaults for missing properties
+  const chart = {
+    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,
+        darkMode: props.chart.options.chartStyling.darkMode || false,
+      },
+      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',
+      },
+      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;
+};