@kws3/ui 1.4.7 → 1.5.6

package/charts/MixedChart.svelte

@@ -0,0 +1,201 @@
+<!--
+  @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} [sparklines=false] - Displays the chart as a sparkline chart.
+These are charts with minimal UI and can be
+squeezed into small spaces, Default: `false`
+  @param {boolean} [multiaxis=false] - Whether the chart has multiple axes, Default: `false`
+  @param {object} [y_axis_options={}] - Y Axis options, see ApexCharts options for Y Axis, 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="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 = [],
+    /**
+     * Displays the chart as a sparkline chart.
+     * These are charts with minimal UI and can be
+     * squeezed into small spaces
+     */
+    sparklines = false,
+    /**
+     * Whether the chart has multiple axes
+     */
+    multiaxis = false,
+    /**
+     * Y Axis options, see ApexCharts options for Y Axis
+     */
+    y_axis_options = {},
+    /**
+     * 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 " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
+
+  let _data = [];
+  let yAxis = [];
+
+  $: 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) {
+      console.warn("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 = merge(
+        {
+          floating: false,
+          opposite: false,
+          decimalsInFloat: 0,
+          axisBorder: {
+            show: true,
+          },
+          axisTicks: {
+            show: true,
+          },
+          labels: {
+            show: true,
+          },
+        },
+        y_axis_options
+      );
+      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,86 @@
+<!--
+  @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 {boolean} [sparklines=false] - Displays the chart as a sparkline chart.
+These are charts with minimal UI and can be
+squeezed into small spaces, 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="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 = [],
+    /**
+     * Displays the chart as a sparkline chart.
+     * These are charts with minimal UI and can be
+     * squeezed into small spaces
+     */
+    sparklines = 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-pie-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: _data = data || Array(labels.length || 0).fill(0);
+  $: _options = merge(
+    pieChartOptions(labels, sparklines),
+    Object.assign({}, { colors: usedColors }, options)
+  );
+</script>

package/charts/RadialChart.svelte

@@ -0,0 +1,117 @@
+<!--
+  @component
+
+
+  @param {object} [options={}] - Chart options, see ApexCharts options for radial charts, Default: `{}`
+  @param {array} [labels=[]] - Data labels, Default: `[]`
+  @param {array} [data=[]] - Chart data, Default: `[]`
+  @param {number} [start_angle=0] - Starting angle in degrees, Default: `0`
+  @param {number} [end_angle=360] - Ending angle in degrees, Default: `360`
+  @param {boolean} [sparklines=false] - Displays the chart as a sparkline chart.
+These are charts with minimal UI and can be
+squeezed into small spaces, 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="radialBar"
+  {height}
+  {width} />
+
+<script>
+  import { Chart } from "@kws3/ui";
+  import { radialChartOptions, merge } from "./utils";
+  import { defaultChartColors } from "../settings";
+
+  /**
+   * Chart options, see ApexCharts options for radial charts
+   */
+  export let options = {},
+    /**
+     * Data labels
+     */
+    labels = [],
+    /**
+     * Chart data
+     */
+    data = [],
+    /**
+     * Starting angle in degrees
+     */
+    start_angle = 0,
+    /**
+     * Ending angle in degrees
+     */
+    end_angle = 360,
+    /**
+     * Displays the chart as a sparkline chart.
+     * These are charts with minimal UI and can be
+     * squeezed into small spaces
+     */
+    sparklines = 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 };
+
+  let _data = [],
+    _labels = [];
+
+  $: __class =
+    "kws-radial-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: data, normaliseData();
+  $: labels, normaliseLabels();
+  $: _options = merge(
+    radialChartOptions(_labels, start_angle, end_angle, sparklines),
+    Object.assign({}, { colors: usedColors }, options)
+  );
+
+  const normaliseData = () => {
+    _data = data;
+    if (!data) {
+      _data = Array(labels.length || 0).fill(0);
+    }
+    if (!Array.isArray(data)) {
+      _data = [data];
+    }
+  };
+
+  const normaliseLabels = () => {
+    _labels = labels;
+    if (!Array.isArray(labels)) {
+      _labels = [labels];
+    }
+  };
+</script>

package/charts/utils.js

@@ -0,0 +1,213 @@
+import ApexCharts from "apexcharts/dist/apexcharts.esm";
+
+const themeColors = [
+  "#284BED",
+  "#ED6134",
+  "#1DAFEC",
+  "#EDB405",
+  "#11EDB7",
+  "#77ED11",
+];
+
+export const merge = ApexCharts.merge;
+
+export function pieChartOptions(labels, is_sparkline) {
+  return {
+    chart: {
+      type: "pie",
+      dropShadow: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+      sparkline: {
+        enabled: is_sparkline ? true : 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, is_sparkline) {
+  var obj = pieChartOptions(labels, is_sparkline);
+  obj.chart.type = "donut";
+  return obj;
+}
+
+export function radialChartOptions(labels, startAngle, endAngle, is_sparkline) {
+  var obj = pieChartOptions(labels, is_sparkline);
+  obj.chart.type = "radialBar";
+  obj.plotOptions = {
+    radialBar: {
+      startAngle,
+      endAngle,
+    },
+  };
+  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: 3,
+      shape: "circle",
+      strokeWidth: 1,
+      hover: {
+        sizeOffset: 3,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+      },
+    },
+    tooltip: {
+      shared: is_sparkline ? false : true,
+      intersect: is_sparkline ? true : false,
+      x: {
+        show: is_sparkline ? true : false,
+      },
+      y: [
+        {},
+        {
+          formatter: undefined,
+        },
+      ],
+      fixed: {
+        enabled: is_sparkline ? false : 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: "12px",
+      labels: {
+        useSeriesColors: true,
+      },
+      markers: {
+        width: 8,
+        height: 8,
+        radius: 8,
+      },
+      itemMargin: {
+        horizontal: 5,
+        vertical: 10,
+      },
+    },
+  };
+}
+
+export function barChartOptions(
+  xAxis,
+  yAxis,
+  is_sparkline,
+  is_horizontal,
+  is_stacked,
+  is_stacked_full
+) {
+  let opts = mixedChartOptions(xAxis, yAxis, is_sparkline);
+  opts.chart.type = "bar";
+  opts.chart.stacked = is_stacked ? true : false;
+  opts.chart.stackType = is_stacked_full ? "100%" : false;
+  opts.plotOptions.bar.horizontal = is_horizontal ? true : false;
+  return opts;
+}
+
+export function lineChartOptions(xAxis, yAxis, is_sparkline) {
+  let opts = mixedChartOptions(xAxis, yAxis, is_sparkline);
+  opts.chart.type = "line";
+  return opts;
+}
+
+export function areaChartOptions(xAxis, yAxis, is_sparkline) {
+  let opts = mixedChartOptions(xAxis, yAxis, is_sparkline);
+  opts.chart.type = "area";
+  return opts;
+}

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;"

package/forms/select/MultiSelect.svelte

@@ -73,6 +73,7 @@ Default value: `<span>{option[search_key] || option}</span>`
             {#if !readonly && !disabled}
               <button
                 on:click|self|stopPropagation={() => remove(tag)}
+                role="button"
                 type="button"
                 class="delete is-small"
                 data-tooltip="{remove_btn_tip} {tag[used_search_key]}" />
@@ -97,6 +98,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   </ul>
   {#if !readonly && !disabled}
     <button
+      role="button"
       type="button"
       class="remove-all delete is-small"
       data-tooltip={remove_all_tip}

package/helpers/Nl2br.svelte

@@ -16,5 +16,5 @@
    * Text to process and output
    */
   export let text = "";
-  $: text_parts = text.split("\n");
+  $: text_parts = text ? text.split("\n") : "";
 </script>