@kws3/ui 1.5.1 → 1.5.8

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/DonutChart.svelte

@@ -5,6 +5,9 @@
   @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
@@ -38,6 +41,12 @@ Send an array of colors to override the default colors, or do not send anything
      * 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
      */
@@ -59,7 +68,8 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
-  $: __class = "kws-donut-chart " + klass;
+  $: __class =
+    "kws-donut-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 
   $: usedColors = colors
     ? colors
@@ -69,7 +79,7 @@ Send an array of colors to override the default colors, or do not send anything
 
   $: _data = data || Array(labels.length || 0).fill(0);
   $: _options = merge(
-    donutChartOptions(labels),
+    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>

package/charts/MixedChart.svelte

@@ -6,7 +6,11 @@
   @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
@@ -44,10 +48,20 @@ Send an array of colors to override the default colors, or do not send anything
      * 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
      */
@@ -70,13 +84,12 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
-  $: __class = "kws-mixed-chart " + klass;
+  $: __class =
+    "kws-mixed-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 
   let _data = [];
   let yAxis = [];
 
-  let sparklines = false;
-
   $: usedColors = colors
     ? colors
     : $defaultChartColors
@@ -91,7 +104,7 @@ Send an array of colors to override the default colors, or do not send anything
 
   const normaliseAll = () => {
     if (data.length !== sets.length) {
-      throw new Error("Data and sets lengths do not match");
+      console.warn("Data and sets lengths do not match");
     }
     normaliseSets();
     normaliseData();
@@ -107,20 +120,23 @@ Send an array of colors to override the default colors, or do not send anything
 
     _sets.forEach((set, idx) => {
       let __set = {};
-      let obj = {
-        floating: false,
-        opposite: false,
-        decimalsInFloat: 0,
-        axisBorder: {
-          show: true,
-        },
-        axisTicks: {
-          show: true,
-        },
-        labels: {
-          show: true,
+      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,

package/charts/PieChart.svelte

@@ -5,6 +5,9 @@
   @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
@@ -38,6 +41,12 @@ Send an array of colors to override the default colors, or do not send anything
      * 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
      */
@@ -60,7 +69,8 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
-  $: __class = "kws-pie-chart " + klass;
+  $: __class =
+    "kws-pie-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 
   $: usedColors = colors
     ? colors
@@ -70,7 +80,7 @@ Send an array of colors to override the default colors, or do not send anything
 
   $: _data = data || Array(labels.length || 0).fill(0);
   $: _options = merge(
-    pieChartOptions(labels),
+    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

@@ -11,7 +11,7 @@ const themeColors = [
 
 export const merge = ApexCharts.merge;
 
-export function pieChartOptions(labels) {
+export function pieChartOptions(labels, is_sparkline) {
   return {
     chart: {
       type: "pie",
@@ -21,6 +21,9 @@ export function pieChartOptions(labels) {
       toolbar: {
         show: false,
       },
+      sparkline: {
+        enabled: is_sparkline ? true : false,
+      },
     },
     colors: themeColors,
     fill: {
@@ -64,12 +67,24 @@ export function pieChartOptions(labels) {
   };
 }
 
-export function donutChartOptions(labels) {
-  var obj = pieChartOptions(labels);
+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: {
@@ -103,8 +118,12 @@ export function mixedChartOptions(xAxis, yAxis, is_sparkline) {
       enabled: false,
     },
     markers: {
-      size: 1,
+      size: 3,
       shape: "circle",
+      strokeWidth: 1,
+      hover: {
+        sizeOffset: 3,
+      },
     },
     plotOptions: {
       bar: {
@@ -112,8 +131,8 @@ export function mixedChartOptions(xAxis, yAxis, is_sparkline) {
       },
     },
     tooltip: {
-      shared: true,
-      intersect: false,
+      shared: is_sparkline ? false : true,
+      intersect: is_sparkline ? true : false,
       x: {
         show: is_sparkline ? true : false,
       },
@@ -124,7 +143,7 @@ export function mixedChartOptions(xAxis, yAxis, is_sparkline) {
         },
       ],
       fixed: {
-        enabled: true,
+        enabled: is_sparkline ? false : true,
         position: "topLeft",
         offsetY: 10,
         offsetX: 25,
@@ -148,7 +167,7 @@ export function mixedChartOptions(xAxis, yAxis, is_sparkline) {
     legend: {
       position: "top",
       horizontalAlign: "right",
-      fontSize: "10px",
+      fontSize: "12px",
       labels: {
         useSeriesColors: true,
       },
@@ -164,3 +183,31 @@ export function mixedChartOptions(xAxis, yAxis, is_sparkline) {
     },
   };
 }
+
+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/datagrid/DataSearch/DataSearch.svelte

@@ -106,19 +106,24 @@
 
   let query = "",
     _filters = [],
-    filterVals = {};
+    filterVals = {},
+    filterWidthStyle = "";
 
   $: usedFilterComponent = filterComponent ? filterComponent : SearchFilter;
-  $: filterWidthStyle = hasSearch
-    ? `max-width:${(1 / (_filters.length + 2)) * 100}%`
-    : "";
   $: changed = q && q.trim() != "";
   $: q, qHasChanged();
   $: filters, filtersHaveChanged();
 
+  function calculateMaxWidths() {
+    filterWidthStyle = hasSearch
+      ? `max-width:${(1 / (_filters.length + 2)) * 100}%`
+      : "";
+  }
+
   function filtersHaveChanged() {
     if (filters) {
       _filters = [];
+      let temp = [];
       for (let i in filters) {
         let obj = { name: i, options: [], type: "select" };
         if (Array.isArray(filters[i])) {
@@ -131,9 +136,12 @@
             obj.type = filters[i].type;
           }
         }
-        _filters.push(obj);
+        temp.push(obj);
       }
+      _filters = temp;
     }
+
+    calculateMaxWidths();
   }
 
   function qHasChanged() {

package/datagrid/Pagination/Pagination.svelte

@@ -47,7 +47,7 @@
       {:else}
         <div class="level-item">
           {#if showTotal}
-            <strong>Total {meta.total} {entityName}</strong>
+            <strong>Total {totalItems} {entityName}</strong>
           {:else if showCurrent}
             {#if meta.total > 0}Showing {meta.offset * 1 + 1} to {meta.offset *
                 1 +
@@ -72,12 +72,12 @@
           {/if}
         {/if}
         {#if showTotal}
-          <strong>{meta.total} {entityName}</strong>
+          <strong>{totalItems} {entityName}</strong>
         {/if}
       </div>
     {:else if showPerPage && showTotal && !showCurrent}
       <div class="level-item pagination-showing">
-        <strong>Total {meta.total} {entityName}</strong>
+        <strong>Total {totalItems} {entityName}</strong>
       </div>
     {/if}
 
@@ -204,6 +204,7 @@
     _perPageOptions = ret;
   }
 
+  $: totalItems = meta && meta.total ? meta.total : 0;
   $: currentPage = Math.floor(meta.offset / meta.limit);
   $: totalPages = Math.ceil(meta.total / (meta.limit || 1));
   $: totalPages, currentPage, breakThreshold, calculatePages();

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 && typeof text == "string" ? text.split("\n") : "";
 </script>

package/index.js

@@ -61,3 +61,7 @@ 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";
+export { default as BarChart } from "./charts/BarChart.svelte";
+export { default as LineChart } from "./charts/LineChart.svelte";
+export { default as AreaChart } from "./charts/AreaChart.svelte";
+export { default as RadialChart } from "./charts/RadialChart.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.5.1",
+  "version": "1.5.8",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -28,5 +28,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "affc920010dff752a3f8b3b997fe2e160b8a9e67"
+  "gitHead": "83046c7c9f3208ecace614fe22b152f00248bd06"
 }

package/styles/Chart.scss

@@ -22,11 +22,17 @@ $kws-chart-tooltip-foreground-color: $scheme-invert-ter !default;
       margin-right: 5px;
     }
   }
-  .apexcharts-legend-text {
-    font-size: 12px !important;
+  .apexcharts-tooltip-title {
+    font-weight: bold;
+    margin-bottom: 0;
+    padding: 0 6px;
+    text-align: center;
   }
 
-  &.kws-mixed-chart {
+  &.kws-mixed-chart:not(.kws-sparklines),
+  &.kws-bar-chart:not(.kws-sparklines),
+  &.kws-line-chart:not(.kws-sparklines),
+  &.kws-area-chart:not(.kws-sparklines) {
     .apexcharts-tooltip {
       flex-direction: row;
       box-shadow: none;