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

package/src/helpers/range/estimate-data-series-have-close-values.js

@@ -0,0 +1,54 @@
+import { isEqualWithTolerance } from '../numbers/numbers';
+
+/**
+ * Estimates whether any of the data series has values that are all close together
+ * - checks only the first and last values in each series (i.e. assumes they are ordered)
+ * - uses an equality check with tolerance for decimal precision noise
+ * - this is just an inexpensive "guesstimate" (full min/max detection can be used afterwards)
+ *
+ * @param {Array} generatedDatasets chart dataset series with x, y points
+ * @return {boolean} - at least one series has values that seem close together
+ */
+export const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
+  if (!Array.isArray(generatedDatasets) || !generatedDatasets.length) {
+    return false;
+  }
+  const axesFirstLast = generatedDatasets.reduce((acc, dataset) => {
+    const xAxisId = dataset?.xAxisID ?? 'defaultX';
+    const yAxisId = dataset?.yAxisID ?? 'defaultY';
+    const data = dataset?.data;
+    if (data && data.length) {
+      const { x: xFirstCurrent, y: yFirstCurrent } = data?.[0] ?? {};
+      const { x: xLastCurrent, y: yLastCurrent } = data.at(-1) ?? {};
+      const xFirstAcc = acc?.[xAxisId]?.xFirst ?? xFirstCurrent;
+      const xLastAcc = acc?.[xAxisId]?.xLast ?? xLastCurrent;
+      const yFirstAcc = acc?.[yAxisId]?.yFirst ?? yFirstCurrent;
+      const yLastAcc = acc?.[yAxisId]?.yLast ?? yLastCurrent;
+      const xFirst = Math.min(xFirstCurrent, xFirstAcc);
+      const xLast = Math.max(xLastCurrent, xLastAcc);
+      const yFirst = Math.min(yFirstCurrent, yFirstAcc);
+      const yLast = Math.max(yLastCurrent, yLastAcc);
+      acc = {
+        ...acc,
+        [xAxisId]: {
+          ...acc[xAxisId],
+          xFirst,
+          xLast,
+        },
+        [yAxisId]: {
+          yFirst,
+          yLast,
+        },
+      };
+    }
+    return acc;
+  }, {});
+  return Object.values(axesFirstLast).some(
+    ({ xFirst, xLast, yFirst, yLast }) => {
+      return (
+        isEqualWithTolerance(xFirst, xLast) ||
+        isEqualWithTolerance(yFirst, yLast)
+      );
+    },
+  );
+};

package/src/helpers/range/range.js

@@ -0,0 +1,95 @@
+import { isEqualWithTolerance, round } from '../numbers/numbers';
+
+const whiteSpacePercentage = 0.05; // relative amount of white space on each "side" of the data points
+
+const defaultRange = { min: -1, max: 1 };
+
+/**
+ * Overrides the default chart.js axis range for some edge-cases:
+ * - when no data -> default range
+ * - when all values are close to zero -> default range
+ * - when all values are close to each other -> custom 5% padding
+ * - when autoAxisPadding is set -> custom 5% padding
+ * - all other cases fall back to chart.js default behaviour
+ *
+ * `autoAxisPadding` feature requirements:
+ * - specified by Truls and ported by Mark+Oleg
+ * - numbers that are equal (within tolerance) shall be presented as a straight line
+ * - all other data series shall use 90% of width of axis (5% padding each side)
+ * - the padding on each side shall be symmetric
+ *
+ * @param {object} args
+ * @param {array<number|null>} args.data
+ * @param {boolean} [args.beginAtZero]
+ * @param {boolean>} [args.autoAxisPadding]
+ * @returns {object} returns {min, max} pair
+ */
+export const getSuggestedAxisRange = ({
+  data,
+  beginAtZero = false,
+  autoAxisPadding = false,
+}) => {
+  const dataMin = Math.min(
+    ...data.filter((v) => v !== null && v !== undefined && !isNaN(v)),
+  );
+  const dataMax = Math.max(
+    ...data.filter((v) => v !== null && v !== undefined && !isNaN(v)),
+  );
+  const isNegative = Math.sign(dataMin) === -1 || Math.sign(dataMax) === -1;
+  const isCloseToZeroWithTolerance =
+    isEqualWithTolerance(dataMin, 0) && isEqualWithTolerance(dataMax, 0);
+
+  /*
+    Use default range upon no data or when all values are close to 0
+  */
+  if (!data.length || isCloseToZeroWithTolerance) {
+    return defaultRange;
+  }
+
+  /*
+    When all values are close to the same, always add some padding OW-4327
+  */
+  if (isEqualWithTolerance(dataMin, dataMax)) {
+    const point = dataMax;
+    const padding = point * whiteSpacePercentage;
+    const minAxisValue = beginAtZero && !isNegative ? 0 : point - padding;
+    const maxAxisValue = beginAtZero && isNegative ? 0 : point + padding;
+    return {
+      min: round(minAxisValue),
+      max: round(maxAxisValue),
+    };
+  }
+
+  /*
+    Else fall back to native chart.js implementation when autoAxisPadding is off
+   */
+  if (!autoAxisPadding) {
+    return {
+      min: undefined,
+      max: undefined,
+    };
+  }
+
+  /*
+    Else use custom auto scaling with 5% padding (only when autoAxisPadding is set)
+  */
+  const rangeBeginAtZero = dataMin === 0 || dataMax === 0 || beginAtZero;
+  const positiveAndNegative =
+    Math.sign(dataMin) === -1 && Math.sign(dataMax) === 1;
+
+  const range = Math.abs(dataMax - dataMin);
+  const padding = autoAxisPadding ? range * whiteSpacePercentage : 0;
+  const minAxisValue =
+    !positiveAndNegative && rangeBeginAtZero && beginAtZero && !isNegative
+      ? 0
+      : dataMin - padding;
+  const maxAxisValue =
+    !positiveAndNegative && rangeBeginAtZero && beginAtZero && isNegative
+      ? 0
+      : dataMax + padding;
+
+  return {
+    min: round(minAxisValue),
+    max: round(maxAxisValue),
+  };
+};

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;