@oliasoft-open-source/charts-library 2.0.0

package/src/helpers/get-chart-annotation.js

@@ -0,0 +1,91 @@
+import { AxisType, ChartType, CursorStyle, Position } from './enums';
+import {
+  ANNOTATION_DASH,
+  BORDER_WIDTH,
+  COLORS,
+  DARK_MODE_COLORS,
+} from './chart-consts';
+
+const annotationEnter = ({ element }, { chart }) => {
+  if (element.options.scaleID?.includes(AxisType.X)) {
+    element.options.label.xAdjust = chart.chartArea.left;
+  }
+  element.options.borderWidth = BORDER_WIDTH.HOVERED;
+  element.options.label.enabled = true;
+  chart.draw();
+  chart.canvas.style.cursor = CursorStyle.Pointer;
+};
+
+const annotationLeave = ({ element }, { chart }) => {
+  element.options.borderWidth = BORDER_WIDTH.INITIAL;
+  element.options.label.enabled = false;
+  chart.draw();
+  chart.canvas.style.cursor = CursorStyle.Initial;
+};
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ */
+const generateAnnotations = (options, state) => {
+  const { annotationsData } = options.annotations;
+  const isDarkModeOn = options.chartStyling.darkMode;
+
+  const annotations = annotationsData?.reduce((acc, curr, i) => {
+    if (!state?.showAnnotationLineIndex?.includes(i)) {
+      return { ...acc };
+    }
+
+    const getScaleId = () => {
+      const axisType = curr.annotationAxis;
+      return options.axes[axisType]?.length > 1 ? `${axisType}1` : axisType;
+    };
+
+    const color =
+      curr?.color || (isDarkModeOn ? DARK_MODE_COLORS[i] : COLORS[i]);
+
+    const annotation = {
+      ...curr,
+      id: `${curr?.label}-${curr?.value}-${i}`,
+      scaleID: getScaleId(),
+      label: {
+        backgroundColor: color,
+        content: curr?.label,
+        enabled: false,
+        position: Position.Top,
+      },
+      borderColor: color,
+      borderWidth: BORDER_WIDTH.INITIAL,
+      borderDash: ANNOTATION_DASH,
+      type: ChartType.Line,
+      enter: (context, event) => {
+        annotationEnter(context, event);
+      },
+      leave: (context, event) => {
+        annotationLeave(context, event);
+      },
+    };
+    return { ...acc, [`annotation${i + 1}`]: annotation };
+  }, {});
+  return annotations;
+};
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @return {{annotations: []}}
+ */
+const getAnnotation = (options, state) => {
+  const { annotations } = options;
+  const isAnnotationShown = annotations?.showAnnotations;
+  const isAnnotationDataProvided = annotations?.annotationsData?.length;
+  return {
+    annotations:
+      isAnnotationShown && isAnnotationDataProvided
+        ? generateAnnotations(options, state)
+        : [],
+  };
+};
+export default getAnnotation;

package/src/helpers/styles.js

@@ -0,0 +1,68 @@
+/*
+  This helper allows us to export simple LESS variables as JavaScript objects.
+  The intention is for keeping code DRY by allowing primary colour palettes etc
+  to be defined in one place only (LESS).
+
+  These simple variables should be defined in a files called `shared.less` that
+  can exist in one of two place:
+
+  - in `override.less` in the root of the parent project
+      (to allow overriding of the default values set in this project)
+  - in `src/style/shared.less in this project (default values)
+
+  The parent and local definitions are merged, with the parent taking
+  precedence.
+
+  The implementation uses Webpack raw-loader to load the shared LESS variables
+  file, and a 3rd party package (less-vars-to-js) to parse it, so they can be
+  exported for use in JavaScript.
+
+  When we upgrade to Webpack 5, we'll have to refactor this to use asset modules
+  instead.
+ */
+
+import lessToJs from 'less-vars-to-js';
+
+// eslint-disable-next-line import/no-unresolved,import/no-webpack-loader-syntax
+import lessVariables from '../style/shared.less?raw';
+
+/*
+  We need to import the `shared.less` file from the root of the parent project
+  conditionally (it may not exist). Would love to use ES6 imports here, but they
+  don't allow optional files without throwing an error when the file doesn't
+  exist. ES6 dynamic imports would require `async` when we use this helper
+  (prefer to avoid that). So falling back to CommonJS require here.
+
+  Hopefully this will get better once we have Webpack 5 asset modules.
+ */
+let lessParentVariables = '{}';
+try {
+  const parentPath = '../../../../override.less?raw';
+  // eslint-disable-next-line import/no-unresolved,global-require,import/no-webpack-loader-syntax,import/no-dynamic-require
+  lessParentVariables = require(`${parentPath}`).default;
+} catch (e) {
+  //do nothing (we fallback to the local definition anyway)
+}
+
+const load = () => {
+  /*
+    Merge the parent project shared.less with the local shared.less
+    (since less-vars-to-js doesn't handle import statements for us)
+
+    The parent definition takes precedence over the local definition
+   */
+  const parent = lessToJs(lessParentVariables, {
+    resolveVariables: true,
+    stripPrefix: true,
+  });
+  const local = lessToJs(lessVariables, {
+    resolveVariables: true,
+    stripPrefix: true,
+  });
+  return {
+    ...local,
+    ...parent,
+  };
+};
+
+export const styleVariables = load();

package/src/helpers/text.js

@@ -0,0 +1,6 @@
+export const getTextWidth = (text, font) => {
+  const element = document.createElement('canvas');
+  const context = element.getContext('2d');
+  context.font = font;
+  return context.measureText(text).width;
+};

package/src/style/external.less

@@ -0,0 +1,4 @@
+@import './fonts.less';
+@import './reset/reset.less';
+
+@import '../components/button/button.module.less';

package/src/style/fonts.less

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Lato';
+  font-weight: normal;
+  font-style: normal;
+  src: url('./fonts/lato/Lato-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-weight: bold;
+  font-style: normal;
+  src: url('./fonts/lato/Lato-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-weight: normal;
+  font-style: italic;
+  src: url('./fonts/lato/Lato-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-weight: bold;
+  font-style: italic;
+  src: url('./fonts/lato/Lato-BoldItalic.woff2') format('woff2');
+}

package/src/style/global.less

@@ -0,0 +1,43 @@
+@import './variables.less';
+@import './fonts.less';
+@import './reset/reset.less';
+
+html {
+  font-size: 14px;
+}
+
+body {
+  color: rgba(0, 0, 0, 0.87);
+  line-height: 1.4285em;
+  font-family: @default_font;
+  font-size: 14px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  line-height: 1.285714em;
+  margin: 0 0 1rem;
+}
+
+p,
+ul,
+ol {
+  margin: 0 0 1rem;
+  line-height: 1.4285em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+ul,
+ol {
+  padding-left: 1.5em;
+}
+
+a {
+  text-decoration: none;
+}

package/src/style/reset/reset.less

@@ -0,0 +1,28 @@
+@import '~normalize.css/normalize.css';
+
+/* Border-Box */
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html {
+  box-sizing: border-box;
+}
+
+/* iPad Input Shadows */
+input[type='text'],
+input[type='email'],
+input[type='search'],
+input[type='password'] {
+  -webkit-appearance: none;
+  -moz-appearance: none; /* mobile firefox too! */
+}
+
+/* FF dotted border outlines */
+:focus {
+  outline: none !important;
+}
+::-moz-focus-inner {
+  border: 0 !important;
+}

package/src/style/shared.less

@@ -0,0 +1,24 @@
+/*
+ This file has shared variables that are re-used:
+   - in other LESS files/modules
+   - in JavaScript, via https://www.npmjs.com/package/less-vars-to-js
+
+ Only use simple variables in this file
+ */
+
+// Brand guidelines
+@colorPrimary: #eb6429;
+@colorError: #e14c4c;
+@colorWarning: #e2bd27;
+@colorSuccess: #3bbb3b;
+@colorInfo: #29a7eb;
+
+/*
+  Allow the parent project to optionally override the primary colour palette
+  by having an `override.less` file in its root directory
+ */
+@import (optional) '../../../../override.less';
+
+/*
+  Other shared variables
+ */

package/src/style/variables.less

@@ -0,0 +1,91 @@
+@import './shared.less';
+
+@default_font: 'Lato', sans-serif;
+
+/*
+  LAYOUT
+*/
+
+@topbar_height: 60px;
+@sidebar_width: 300px;
+@sidebar_width_collapsed: 70px;
+
+/*
+  CARDS
+*/
+
+@card_border_radius: 4px;
+@card_border_color: #d5d7d9;
+@card_header_bg_color: #f7f7f7;
+@card_padding_x: 15px;
+@card_padding_y: 10px;
+
+/*
+  INPUTS
+*/
+
+@input_height: 38px;
+@input_height_small: 24px;
+@input_font_size_small: 12px;
+@input_padding_x: 14px;
+@input_padding_y: 9.5px;
+@input_padding_small_x: 7px;
+@input_padding_small_y: 3.5px;
+@input_border_radius: 4px;
+
+/*
+  COLOR
+*/
+
+// Text
+@colorTextDefault: rgba(0, 0, 0, 0.87);
+@colorTextMuted: #7d7b7a;
+@colorTextFaint: #acabab;
+@colorTextError: hsl(hue(@colorError), 40%, 50%);
+@colorTextWarning: hsl(hue(@colorWarning), 40%, 50%);
+@colorTextSuccess: hsl(hue(@colorSuccess), 40%, 50%);
+@colorTextPrimary: @colorPrimary;
+
+:root {
+  --color-text-default: @colorTextDefault;
+  --color-text-muted: @colorTextMuted;
+  --color-text-faint: @colorTextFaint;
+  --color-text-error: @colorTextError;
+  --color-text-warning: @colorTextWarning;
+  --color-text-success: @colorTextSuccess;
+  --color-text-primary: @colorTextPrimary;
+}
+
+// Buttons
+@col_btn_default: white;
+@col_btn_primary: @colorPrimary;
+@col_btn_danger: @colorError;
+@col_btn_success: @colorSuccess;
+
+// Inputs
+@input_border_color: rgba(34, 36, 38, 0.15);
+@input_border_color_hover: rgba(34, 36, 38, 0.35);
+@input_border_color_focus: hsl(hue(@colorInfo), 40%, 60%);
+@input_background_error: hsl(hue(@colorError), 40%, 97%);
+@input_border_color_error: hsl(hue(@colorError), 40%, 70%);
+@input_color_error: @colorTextError;
+@input_background_warning: hsl(hue(@colorWarning), 40%, 97%);
+@input_border_color_warning: hsl(hue(@colorWarning), 40%, 70%);
+@input_color_warning: @colorTextWarning;
+@input_color_placeholder: #c0c0c0;
+@input_background_disabled: #ecedef;
+
+/*
+  Z-INDEX
+*/
+
+@zindex_topbar_alert: 98;
+@zindex_drawer: 99;
+@zindex_topbar: 101;
+@zindex_dimmer: 1000;
+@zindex_modal: 2000;
+//We need react-laag layers to appear above modals
+//Tooltips need to be above dropdown layers
+@zindex_popover: 2001;
+@zindex_dropdown: 2002;
+@zindex_tooltip: 2003;

package/webpack/webpack.common.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const { resolve } = require('./webpack.resolve.js');
+
+module.exports = {
+  resolve,
+  entry: {
+    app: './src/docs/start.jsx',
+  },
+  output: {
+    path: path.resolve(__dirname, '../public'),
+    filename: '[name].[contenthash].js',
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: 'src/docs/html/index.html',
+      filename: './index.html',
+      favicon: 'src/docs/html/favicon.png',
+      cache: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css',
+    }),
+  ],
+  optimization: {
+    runtimeChunk: 'single', // single runtime bundle for all chunks
+    // put node_modules into separate bundles
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+      },
+    },
+  },
+};

package/webpack/webpack.common.rules.js

@@ -0,0 +1,107 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = function getRules(env) {
+  const styleLoader = MiniCssExtractPlugin.loader;
+
+  return [
+    {
+      test: /\.jsx$|\.es6$|\.js$/,
+      exclude:
+        /node_modules(?![\\/]@oliasoft-open-source[\\/]react-ui-library)/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          cacheDirectory: false,
+          presets: ['@babel/react'],
+        },
+      },
+    },
+    {
+      test: /\.(ttf|eot|woff|woff2)$/,
+      type: 'asset/resource',
+      generator: {
+        filename: './fonts/[name].[contenthash][ext]',
+      },
+    },
+    {
+      test: /\.(svg|gif|png|jpg)$/,
+      type: 'asset/resource',
+      generator: {
+        filename: './images/[name].[contenthash][ext]',
+      },
+    },
+    {
+      test: /^(?!.*?(\.module)).*\.css$/, //all *.css except for *.module.css
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+          },
+        },
+      ],
+    },
+    {
+      test: /^(?!.*?(\.module)).*\.less$/, //all *.less except for *.module.less
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+          },
+        },
+        'less-loader',
+      ],
+    },
+    {
+      test: /\.module\.css$/, //*.module.css
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+            modules: {
+              mode: 'local',
+              localIdentName: '[name]-[local]-[hash:base64:5]', //friendly module classNames
+            },
+          },
+        },
+      ],
+    },
+    {
+      test: /\.module\.less$/, //*.module.less
+      use: [
+        styleLoader,
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: env === 'development',
+            modules: {
+              mode: 'local',
+              localIdentName: '[name]-[local]-[hash:base64:5]', //friendly module classNames
+            },
+          },
+        },
+        'less-loader',
+      ],
+    },
+    {
+      test: /\.stories\.jsx?$/,
+      loader: require.resolve('@storybook/source-loader'),
+      include: [path.resolve(__dirname, '../src')],
+      enforce: 'pre',
+    },
+    {
+      test: /\.mdx?$/,
+      use: ['babel-loader', '@mdx-js/loader'],
+    },
+    {
+      resourceQuery: /raw/,
+      type: 'asset/source',
+    },
+  ];
+};

package/webpack/webpack.dev.js

@@ -0,0 +1,22 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const getRules = require('./webpack.common.rules.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  output: {
+    publicPath: '/',
+  },
+  devServer: {
+    port: 9001,
+    open: true,
+    historyApiFallback: true,
+    client: {
+      overlay: true,
+    },
+  },
+  module: {
+    rules: getRules('development'),
+  },
+});

package/webpack/webpack.prod.js

@@ -0,0 +1,23 @@
+const { merge } = require('webpack-merge');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const common = require('./webpack.common.js');
+const getRules = require('./webpack.common.rules.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  output: {
+    publicPath: '/line-chart-library/',
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+  module: {
+    rules: getRules('production'),
+  },
+});

package/webpack/webpack.resolve.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    alias: {
+      '~components': path.resolve(__dirname, '../src/components'),
+      '~docs': path.resolve(__dirname, '../src/docs'),
+      '~helpers': path.resolve(__dirname, '../src/helpers'),
+      '~style': path.resolve(__dirname, '../src/style'),
+      '~vendor': path.resolve(__dirname, '../src/vendor'),
+    },
+    fallback: {
+      fs: false,
+      net: false,
+      repl: false,
+      tls: false,
+      path: false,
+      crypto: false,
+    },
+  },
+};