@kws3/ui 1.4.6 → 1.5.5

package/buttons/ConfirmButton.svelte

@@ -28,6 +28,7 @@
   <p class="control">
     {#if _confirm}
       <button
+        role="button"
         class="button is-success is-light is-shadowless is-{size} {button_class}"
         type="button"
         on:click|preventDefault|stopPropagation={cancel}>
@@ -37,6 +38,7 @@
   </p>
   <p class="control is-expanded">
     <button
+      role="button"
       class="button is-{size} {_doing
         ? main_color + ' is-loading'
         : _error

package/charts/AreaChart.svelte

@@ -0,0 +1,144 @@
+<!--
+  @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 {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="area"
+  {height}
+  {width} />
+
+<script>
+  import { Chart } from "@kws3/ui";
+  import { areaChartOptions, 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,
+    /**
+     * 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-area-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
+
+  let _data = [];
+  let yAxis = {};
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: data, sets, normaliseAll();
+  $: _options = merge(
+    areaChartOptions(labels, yAxis, 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 = merge(
+      {
+        floating: false,
+        opposite: false,
+        decimalsInFloat: 0,
+        axisBorder: {
+          show: true,
+        },
+        axisTicks: {
+          show: true,
+        },
+        labels: {
+          show: true,
+        },
+      },
+      y_axis_options
+    );
+  };
+
+  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: sets[idx],
+        data: set,
+      });
+    });
+  };
+</script>

package/charts/BarChart.svelte

@@ -0,0 +1,166 @@
+<!--
+  @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} [horizontal=false] - Whether the chart displays horizontal bars, Default: `false`
+  @param {boolean} [stacked=false] - Whether the bars are stacked on top of each other, Default: `false`
+  @param {boolean} [stacked_full_width=false] - When bars are stacked, should they span the full width/height of the chart, 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 { barChartOptions, 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 displays horizontal bars
+     */
+    horizontal = false,
+    /**
+     * Whether the bars are stacked on top of each other
+     */
+    stacked = false,
+    /**
+     * When bars are stacked, should they span the full width/height of the chart
+     */
+    stacked_full_width = 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-bar-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
+
+  let _data = [];
+  let yAxis = {};
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: data, sets, normaliseAll();
+  $: _options = merge(
+    barChartOptions(
+      labels,
+      yAxis,
+      sparklines,
+      horizontal,
+      stacked,
+      stacked_full_width
+    ),
+    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 = merge(
+      {
+        floating: false,
+        opposite: false,
+        decimalsInFloat: 0,
+        axisBorder: {
+          show: true,
+        },
+        axisTicks: {
+          show: true,
+        },
+        labels: {
+          show: true,
+        },
+      },
+      y_axis_options
+    );
+  };
+
+  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: sets[idx],
+        data: set,
+      });
+    });
+  };
+</script>

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,85 @@
+<!--
+  @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 {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="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 = [],
+    /**
+     * 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-donut-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: _data = data || Array(labels.length || 0).fill(0);
+  $: _options = merge(
+    donutChartOptions(labels, sparklines),
+    Object.assign({}, { colors: usedColors }, options)
+  );
+</script>

package/charts/LineChart.svelte

@@ -0,0 +1,144 @@
+<!--
+  @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 {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="line"
+  {height}
+  {width} />
+
+<script>
+  import { Chart } from "@kws3/ui";
+  import { lineChartOptions, 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,
+    /**
+     * 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-line-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
+
+  let _data = [];
+  let yAxis = {};
+
+  $: usedColors = colors
+    ? colors
+    : $defaultChartColors
+    ? $defaultChartColors
+    : [];
+
+  $: data, sets, normaliseAll();
+  $: _options = merge(
+    lineChartOptions(labels, yAxis, 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 = merge(
+      {
+        floating: false,
+        opposite: false,
+        decimalsInFloat: 0,
+        axisBorder: {
+          show: true,
+        },
+        axisTicks: {
+          show: true,
+        },
+        labels: {
+          show: true,
+        },
+      },
+      y_axis_options
+    );
+  };
+
+  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: sets[idx],
+        data: set,
+      });
+    });
+  };
+</script>