@kws3/ui 1.4.7 → 1.5.6

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,33 @@ 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";
+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.4.7",
+  "version": "1.5.6",
   "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": "13a6a985ad78d6170290f4cc48a596c5d6660079"
+  "gitHead": "5407d734edfb24c11ce03621e5e41ed0777fad5a"
 }

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,42 @@
+$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-tooltip-title {
+    font-weight: bold;
+    margin-bottom: 0;
+    padding: 0 6px;
+    text-align: center;
+  }
+
+  &.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;
+      background: transparent;
+    }
+  }
+}