@kws3/ui 1.4.5 → 1.5.1

package/charts/Chart.svelte

@@ -0,0 +1,122 @@
+<!--
+  @component
+
+
+  @param {object} [options={}] - Chart options, Default: `{}`
+  @param {string} [type="bar"] - Chart type, Default: `"bar"`
+  @param {array} [series=[]] - Series data, Default: `[]`
+  @param {string} [width="100%"] - Chart width, Default: `"100%"`
+  @param {string} [height="auto"] - Chart height, Default: `"auto"`
+  @param {string} [class=""] - CSS classes for container, Default: `""`
+
+-->
+<div class="kws-chart {klass}" bind:this={canvas} />
+
+<script>
+  import { onMount, createEventDispatcher } from "svelte";
+  import ApexCharts from "apexcharts/dist/apexcharts.esm";
+  import { merge } from "./utils";
+
+  const fire = createEventDispatcher();
+  let canvas, chart;
+
+  /**
+   * Chart options
+   */
+  export let options = {},
+    /**
+     * Chart type
+     */
+    type = "bar",
+    /**
+     * Series data
+     */
+    series = [],
+    /**
+     * Chart width
+     */
+    width = "100%",
+    /**
+     * Chart height
+     */
+    height = "auto";
+
+  /**
+   * CSS classes for container
+   */
+  let klass = "";
+  export { klass as class };
+
+  onMount(() => {
+    init();
+    return () => {
+      chart && chart.destroy();
+    };
+  });
+
+  $: width, height, type, refresh();
+  $: series, seriesChanged();
+  $: options, optionsChanged();
+
+  const patchEvents = (evs) => {
+    const events = {};
+    if (typeof evs != "undefined") {
+      for (var type in evs) {
+        events[type] = (a, b, c) => {
+          fire(type, [a, b, c]);
+        };
+      }
+    }
+    return events;
+  };
+
+  const init = () => {
+    chart && chart.destroy();
+
+    const newOptions = {
+      chart: {
+        type,
+        height,
+        width,
+      },
+      type,
+      series,
+    };
+
+    var events = {};
+
+    if (typeof options.chart.events != "undefined") {
+      events = patchEvents(options.chart.events);
+      options.chart.events = {};
+    }
+
+    const config = merge(options, newOptions);
+
+    if (canvas) {
+      config.chart.events = events;
+      chart = new ApexCharts(canvas, config);
+      chart.render();
+    }
+  };
+
+  const refresh = () => {
+    chart && chart.destroy();
+    init();
+  };
+
+  const seriesChanged = () => {
+    chart ? chart.updateSeries(series, true) : init();
+  };
+
+  const optionsChanged = () => {
+    if (chart) {
+      if (typeof options.chart.events != "undefined") {
+        options.chart.events = patchEvents(options.chart.events);
+      }
+      chart.updateOptions(options, true);
+    } else {
+      init();
+    }
+    chart ? chart.updateOptions(options, true) : init();
+  };
+</script>

package/charts/DonutChart.svelte

@@ -0,0 +1,75 @@
+<!--
+  @component
+
+
+  @param {object} [options={}] - Chart options, see ApexCharts options for donut charts, Default: `{}`
+  @param {array} [labels=[]] - Data labels, Default: `[]`
+  @param {array} [data=[]] - Chart data, Default: `[]`
+  @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
+  @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
+  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {string} [class=""] - CSS classes for container, Default: `""`
+
+-->
+<Chart
+  class={__class}
+  options={_options}
+  series={_data}
+  type="donut"
+  {height}
+  {width} />
+
+<script>
+  import { Chart } from "@kws3/ui";
+  import { donutChartOptions, merge } from "./utils";
+  import { defaultChartColors } from "../settings";
+
+  /**
+   * Chart options, see ApexCharts options for donut charts
+   */
+  export let options = {},
+    /**
+     * Data labels
+     */
+    labels = [],
+    /**
+     * Chart data
+     */
+    data = [],
+    /**
+     * Chart width, supports CSS size strings
+     */
+    width = "100%",
+    /**
+     * Chart height, supports CSS size strings
+     */
+    height = "auto",
+    /**
+     * Chart colors, can be modified globally in framework settings
+     *
+     * Send an array of colors to override the default colors, or do not send anything to use the default colors
+     * @type {array}
+     */
+    colors = null;
+  /**
+   * CSS classes for container
+   */
+  let klass = "";
+  export { klass as class };
+
+  $: __class = "kws-donut-chart " + klass;
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: _data = data || Array(labels.length || 0).fill(0);
+  $: _options = merge(
+    donutChartOptions(labels),
+    Object.assign({}, { colors: usedColors }, options)
+  );
+</script>

package/charts/MixedChart.svelte

@@ -0,0 +1,185 @@
+<!--
+  @component
+
+
+  @param {object} [options={}] - Chart options, see ApexCharts options for bar charts, Default: `{}`
+  @param {array} [labels=[]] - Data labels, Default: `[]`
+  @param {array} [sets=[]] - Data sets, Default: `[]`
+  @param {array} [data=[]] - Chart data, Default: `[]`
+  @param {boolean} [multiaxis=false] - Whether the chart has multiple axes, Default: `false`
+  @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
+  @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
+  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {string} [class=""] - CSS classes for container, Default: `""`
+
+-->
+<Chart
+  class={__class}
+  options={_options}
+  series={_data}
+  type="bar"
+  {height}
+  {width} />
+
+<script>
+  import { Chart } from "@kws3/ui";
+  import { mixedChartOptions, merge } from "./utils";
+  import { defaultChartColors } from "../settings";
+
+  /**
+   * Chart options, see ApexCharts options for bar charts
+   */
+  export let options = {},
+    /**
+     * Data labels
+     */
+    labels = [],
+    /**
+     * Data sets
+     */
+    sets = [],
+    /**
+     * Chart data
+     */
+    data = [],
+    /**
+     * Whether the chart has multiple axes
+     */
+    multiaxis = false,
+    /**
+     * Chart width, supports CSS size strings
+     */
+    width = "100%",
+    /**
+     * Chart height, supports CSS size strings
+     */
+    height = "auto",
+    /**
+     * Chart colors, can be modified globally in framework settings
+     *
+     * Send an array of colors to override the default colors, or do not send anything to use the default colors
+     * @type {array}
+     */
+    colors = null;
+
+  /**
+   * CSS classes for container
+   */
+  let klass = "";
+  export { klass as class };
+
+  $: __class = "kws-mixed-chart " + klass;
+
+  let _data = [];
+  let yAxis = [];
+
+  let sparklines = false;
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: data, sets, normaliseAll();
+  $: _options = merge(
+    mixedChartOptions(labels, multiaxis ? yAxis : yAxis[0], sparklines),
+    Object.assign({}, { colors: usedColors }, options)
+  );
+
+  const normaliseAll = () => {
+    if (data.length !== sets.length) {
+      throw new Error("Data and sets lengths do not match");
+    }
+    normaliseSets();
+    normaliseData();
+  };
+
+  const normaliseSets = () => {
+    yAxis = [];
+
+    let _sets = sets || [],
+      oppositeAxisApplied = false,
+      mainSeriesName = null,
+      oppositeSeriesName = null;
+
+    _sets.forEach((set, idx) => {
+      let __set = {};
+      let obj = {
+        floating: false,
+        opposite: false,
+        decimalsInFloat: 0,
+        axisBorder: {
+          show: true,
+        },
+        axisTicks: {
+          show: true,
+        },
+        labels: {
+          show: true,
+        },
+      };
+      if (typeof set === "string") {
+        __set = Object.assign(obj, {
+          name: set,
+          type: "column",
+        });
+      } else {
+        __set = Object.assign(obj, { name: "set-" + idx, type: "column" }, set);
+      }
+
+      //series names cannot be random,
+      //they have to be of one of the sets
+      if (!mainSeriesName) {
+        mainSeriesName = __set.name;
+      }
+
+      if (__set.opposite) {
+        //hide extras axes on the opposite side
+        if (!oppositeAxisApplied) {
+          oppositeAxisApplied = true;
+          if (!oppositeSeriesName) {
+            oppositeSeriesName = __set.name;
+          }
+        } else {
+          __set.show = false;
+        }
+      } else {
+        //hide extras axes on the main side
+        if (idx > 0) {
+          __set.show = false;
+        }
+      }
+
+      if (__set.forceDisplay) {
+        __set.show = true;
+      }
+
+      //set a common series name based on axis..
+      //so that scales for each axis are the same
+      __set.seriesName = __set.opposite ? oppositeSeriesName : mainSeriesName;
+
+      yAxis.push(__set);
+    });
+  };
+
+  const normaliseData = () => {
+    _data = [];
+
+    //ensuring data is an array of arrays
+    let sliced_data = (data || []).slice();
+    if (!Array.isArray(sliced_data[0])) {
+      sliced_data = [sliced_data];
+    }
+
+    sliced_data.forEach((set, idx) => {
+      _data.push({
+        name: yAxis[idx].name,
+        type: yAxis[idx].type,
+        data: set,
+      });
+    });
+  };
+</script>

package/charts/PieChart.svelte

@@ -0,0 +1,76 @@
+<!--
+  @component
+
+
+  @param {object} [options={}] - Chart options, see ApexCharts options for pie charts, Default: `{}`
+  @param {array} [labels=[]] - Data labels, Default: `[]`
+  @param {array} [data=[]] - Chart data, Default: `[]`
+  @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
+  @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
+  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {string} [class=""] - CSS classes for container, Default: `""`
+
+-->
+<Chart
+  class={__class}
+  options={_options}
+  series={_data}
+  type="pie"
+  {height}
+  {width} />
+
+<script>
+  import { Chart } from "@kws3/ui";
+  import { pieChartOptions, merge } from "./utils";
+  import { defaultChartColors } from "../settings";
+
+  /**
+   * Chart options, see ApexCharts options for pie charts
+   */
+  export let options = {},
+    /**
+     * Data labels
+     */
+    labels = [],
+    /**
+     * Chart data
+     */
+    data = [],
+    /**
+     * Chart width, supports CSS size strings
+     */
+    width = "100%",
+    /**
+     * Chart height, supports CSS size strings
+     */
+    height = "auto",
+    /**
+     * Chart colors, can be modified globally in framework settings
+     *
+     * Send an array of colors to override the default colors, or do not send anything to use the default colors
+     * @type {array}
+     */
+    colors = null;
+
+  /**
+   * CSS classes for container
+   */
+  let klass = "";
+  export { klass as class };
+
+  $: __class = "kws-pie-chart " + klass;
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: _data = data || Array(labels.length || 0).fill(0);
+  $: _options = merge(
+    pieChartOptions(labels),
+    Object.assign({}, { colors: usedColors }, options)
+  );
+</script>

package/charts/utils.js

@@ -0,0 +1,166 @@
+import ApexCharts from "apexcharts/dist/apexcharts.esm";
+
+const themeColors = [
+  "#284BED",
+  "#ED6134",
+  "#1DAFEC",
+  "#EDB405",
+  "#11EDB7",
+  "#77ED11",
+];
+
+export const merge = ApexCharts.merge;
+
+export function pieChartOptions(labels) {
+  return {
+    chart: {
+      type: "pie",
+      dropShadow: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: themeColors,
+    fill: {
+      opacity: 1,
+    },
+    stroke: {
+      width: 0,
+    },
+    states: {
+      active: {
+        filter: {
+          type: "none",
+        },
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    tooltip: {
+      shared: true,
+      intersect: false,
+      fillSeriesColor: false,
+      x: {
+        show: true,
+        formatter: undefined,
+      },
+      theme: false,
+    },
+    labels: labels,
+    legend: {
+      position: "bottom",
+      horizontalAlign: "center",
+      labels: {
+        useSeriesColors: true,
+      },
+      markers: {
+        size: 3,
+        shape: "circle",
+      },
+    },
+  };
+}
+
+export function donutChartOptions(labels) {
+  var obj = pieChartOptions(labels);
+  obj.chart.type = "donut";
+  return obj;
+}
+
+export function mixedChartOptions(xAxis, yAxis, is_sparkline) {
+  return {
+    chart: {
+      type: "bar",
+      stacked: false,
+      dropShadow: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+      sparkline: {
+        enabled: is_sparkline ? true : false,
+      },
+    },
+    colors: themeColors,
+    fill: {
+      opacity: 1,
+    },
+    states: {
+      active: {
+        filter: {
+          type: "none",
+        },
+      },
+    },
+    grid: {
+      clipMarkers: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    markers: {
+      size: 1,
+      shape: "circle",
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+      },
+    },
+    tooltip: {
+      shared: true,
+      intersect: false,
+      x: {
+        show: is_sparkline ? true : false,
+      },
+      y: [
+        {},
+        {
+          formatter: undefined,
+        },
+      ],
+      fixed: {
+        enabled: true,
+        position: "topLeft",
+        offsetY: 10,
+        offsetX: 25,
+      },
+      theme: false,
+    },
+    xaxis: {
+      categories: xAxis,
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    yaxis: yAxis,
+    stroke: {
+      width: 2,
+      curve: "smooth",
+    },
+    legend: {
+      position: "top",
+      horizontalAlign: "right",
+      fontSize: "10px",
+      labels: {
+        useSeriesColors: true,
+      },
+      markers: {
+        width: 8,
+        height: 8,
+        radius: 8,
+      },
+      itemMargin: {
+        horizontal: 5,
+        vertical: 10,
+      },
+    },
+  };
+}

package/controls/Checkbox.svelte

@@ -34,7 +34,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
   class="checkbox kws-checkbox is-{size} is-{color} {klass}"
   {style}>
   <!--Checkbox change event-->
-  <input type="checkbox" {disabled} bind:checked on:change />
+  <input role="checkbox" type="checkbox" {disabled} bind:checked on:change />
   <span class="kws-checkbox-label" style={label_style}>
     <!-- Used for the Checkbox label--><slot />
   </span>

package/controls/NumberInput.svelte

@@ -28,6 +28,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
 <div class="field has-addons">
   <div class="control">
     <button
+      role="button"
       type="button"
       class="button is-{size} is-{minus_button_color}"
       style="box-shadow:none;"
@@ -41,6 +42,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   </div>
   <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
     <input
+      data-testid="input"
       class="input has-text-centered is-{size} is-{value < min || value > max
         ? 'danger'
         : ''}"
@@ -56,6 +58,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   </div>
   <div class="control">
     <button
+      role="button"
       type="button"
       class="button is-{size} is-{plus_button_color}"
       style="box-shadow:none;"
@@ -159,7 +162,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      */
     plus_button_color = "";
 
-  let _has_focus = false;
+  let _has_focus = false,
+    _old_value = null;
 
   $: value && !_has_focus, validateInput(); // will work like on state changed
 
@@ -180,21 +184,18 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     if (typeof value == "undefined" || value === null) value = min;
     value = Number(value) + i * step;
     if (step % 1 != 0) value = value.toFixed(1);
-    /**
-     * Triggered when value changes
-     */
-    fire("change");
   };
 
   function validateInput() {
-    let old_value = value;
+    if (_old_value == null) _old_value = value;
 
     if (typeof value == "undefined" || value === null) value = min;
 
     if (value < min) value = min;
     if (value > max) value = max;
 
-    if (old_value != value) {
+    if (_old_value != value) {
+      _old_value = value;
       /**
        * Triggered when value changes
        */

package/index.js

@@ -2,7 +2,6 @@ export { applySettings } from "./settings";
 
 export { activateTooltips, tooltip, popover } from "./helpers/Tooltip";
 export { default as Popover } from "./helpers/Popover.svelte";
-
 export { default as Icon } from "./helpers/Icon.svelte";
 export { default as Message } from "./helpers/Message.svelte";
 export { default as Modal } from "./helpers/Modal.svelte";
@@ -11,6 +10,8 @@ export { default as Panel } from "./helpers/Panel.svelte";
 export { default as Notification } from "./helpers/Notification.svelte";
 export { default as Loader } from "./helpers/Loader.svelte";
 export { default as ActionSheet } from "./helpers/ActionSheet.svelte";
+export { default as Nl2br } from "./helpers/Nl2br.svelte";
+export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
 export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog";
 export {
   Notifications,
@@ -34,27 +35,29 @@ export { default as Toggle } from "./controls/Toggle.svelte";
 export { default as ToggleButtons } from "./controls/ToggleButtons.svelte";
 export { default as ToggleControl } from "./controls/ToggleControl.svelte";
 export { default as RangeSlider } from "./controls/RangeSlider.svelte";
-export { default as Nl2br } from "./helpers/Nl2br.svelte";
 
 export { default as Transition } from "./transitions/Transition.svelte";
+
 export { default as SlidingPane } from "./sliding-panes/SlidingPane.svelte";
 export { default as SlidingPaneSet } from "./sliding-panes/SlidingPaneSet.svelte";
+
 export { default as SearchableSelect } from "./forms/select/SearchableSelect.svelte";
 export { default as MultiSelect } from "./forms/select/MultiSelect.svelte";
 export { default as MaskedInput } from "./forms/MaskedInput.svelte";
-
 export { default as Colorpicker } from "./forms/colorpicker/Colorpicker.svelte";
-
 export { default as Datepicker } from "./forms/Datepicker.svelte";
 export { default as Timepicker } from "./forms/Timepicker.svelte";
 export { datepicker as DatepickerAction } from "./forms/actions.js";
 export { timepicker as TimepickerAction } from "./forms/actions.js";
-
 export { default as PasswordValidator } from "./forms/PasswordValidator/PasswordValidator.svelte";
 
-export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
 export { default as GridView } from "./datagrid/GridView/GridView.svelte";
 export { default as TileView } from "./datagrid/TileView/TileView.svelte";
 export { default as DataSearch } from "./datagrid/DataSearch/DataSearch.svelte";
 export { default as Pagination } from "./datagrid/Pagination/Pagination.svelte";
 export { default as DataSort } from "./datagrid/DataSort/DataSort.svelte";
+
+export { default as Chart } from "./charts/Chart.svelte";
+export { default as DonutChart } from "./charts/DonutChart.svelte";
+export { default as PieChart } from "./charts/PieChart.svelte";
+export { default as MixedChart } from "./charts/MixedChart.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.4.5",
+  "version": "1.5.1",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -23,9 +23,10 @@
     "access": "public"
   },
   "dependencies": {
+    "apexcharts": "^3.32.0",
     "flatpickr": "^4.5.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "659546c374f97e741a69bffbb3f3cedc2f07fd5c"
+  "gitHead": "affc920010dff752a3f8b3b997fe2e160b8a9e67"
 }

package/settings.js

@@ -5,6 +5,14 @@ const defaultToastPlacement = writable("bottom");
 const defaultSnackbarPlacement = writable("bottom-right");
 const defaultNotificationPlacement = writable("top-right");
 const hasTransitions = writable(true);
+const defaultChartColors = writable([
+  "#284BED",
+  "#ED6134",
+  "#1DAFEC",
+  "#EDB405",
+  "#11EDB7",
+  "#77ED11",
+]);
 
 const SETTINGS = {
   defaultIconFamily,
@@ -12,6 +20,7 @@ const SETTINGS = {
   defaultSnackbarPlacement,
   defaultNotificationPlacement,
   hasTransitions,
+  defaultChartColors,
 };
 
 export {
@@ -20,6 +29,7 @@ export {
   defaultSnackbarPlacement,
   defaultNotificationPlacement,
   hasTransitions,
+  defaultChartColors,
 };
 
 /**
@@ -28,6 +38,7 @@ export {
  * - `defaultSnackbarPlacement`: `"bottom-right"` - default placement of snackbar notifications
  * - `defaultNotificationPlacement`: `"top-right"` - default placement of floating notifications
  * - `hasTransitions`: `true` - Transitions are applied
+ * - `defaultChartColors`: `["#284BED", "#ED6134", "#1DAFEC", "#EDB405", "#11EDB7", "#77ED11"]` - default colors for charts
  *
  * @param {*} object containing all settings
  */

package/styles/Chart.scss

@@ -0,0 +1,36 @@
+$kws-chart-tooltip-background-color: $scheme-main !default;
+$kws-chart-tooltip-foreground-color: $scheme-invert-ter !default;
+
+.kws-chart {
+  .apexcharts-tooltip {
+    display: flex;
+    border: 0;
+    background: $kws-chart-tooltip-background-color;
+    border-radius: 0;
+    .apexcharts-tooltip-title {
+      background: $kws-chart-tooltip-background-color;
+      color: $kws-chart-tooltip-foreground-color;
+      border: none;
+    }
+    .apexcharts-tooltip-series-group.apexcharts-active,
+    .apexcharts-tooltip-series-group:last-child {
+      padding-bottom: 0;
+    }
+    .apexcharts-tooltip-marker {
+      width: 7px;
+      height: 7px;
+      margin-right: 5px;
+    }
+  }
+  .apexcharts-legend-text {
+    font-size: 12px !important;
+  }
+
+  &.kws-mixed-chart {
+    .apexcharts-tooltip {
+      flex-direction: row;
+      box-shadow: none;
+      background: transparent;
+    }
+  }
+}