@likable-hair/svelte 3.3.21 → 3.3.23

package/dist/components/simple/charts/GanymedeBarChart.svelte

@@ -1,151 +1,189 @@
-<script>import { Bar } from "svelte-chartjs";
-import { theme } from "../../..";
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  CategoryScale,
-  BarElement
-} from "chart.js";
-import { onMount } from "svelte";
-import lodash from "lodash";
-ChartJS.register(
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  BarElement,
-  LinearScale,
-  PointElement,
-  CategoryScale
-);
-export let data = {
-  labels: [],
-  datasets: []
-}, horizontal = false, responsive = true, maintainAspectRatio = true, showLegend = true, showYTicks = false, showXTicks = false, displayYGrid = true, lineWidth = 1, enableZoom = true, resetZoom = false, tooltipLabel = void 0, yTickLabel = void 0, xTickLabel = void 0, xTickStepSize = void 0, yTickStepSize = void 0, xMax = void 0, yMax = void 0, rgbTooltipColor = void 0, rgbTooltipBackgroundColor = void 0, rgbBackgroundColor = void 0, width = void 0, height = void 0;
-let mounted = false, zoomMounted = false;
-onMount(() => {
-  mounted = true;
-});
-$:
-  if (!rgbTooltipColor && !!$theme.colors?.[$theme.active]["dark"]["primary"]["300"])
-    rgbTooltipColor = $theme.colors?.[$theme.active]["dark"]["primary"]["300"];
-$:
-  if (!rgbTooltipBackgroundColor && !!$theme.colors?.[$theme.active]["dark"]["primary"]["900"])
-    rgbTooltipBackgroundColor = $theme.colors?.[$theme.active]["dark"]["primary"]["900"];
-$:
-  if (!rgbBackgroundColor && !!$theme.colors?.[$theme.active]["dark"]["background"]["200"])
-    rgbBackgroundColor = $theme.colors?.[$theme.active]["dark"]["background"]["200"];
-$:
-  finalTooltipColor = !!rgbTooltipColor ? `rgb(${rgbTooltipColor})` : void 0;
-$:
-  finalTooltipBackgroundColor = !!rgbTooltipBackgroundColor ? `rgb(${rgbTooltipBackgroundColor})` : void 0;
-$:
-  finalBackgroundColor = !!rgbBackgroundColor ? `rgb(${rgbBackgroundColor}, .3)` : void 0;
-let chart;
-$:
-  if (!!chart && !!enableZoom && !!resetZoom) {
-    chart.resetZoom();
-    resetZoom = false;
+<script lang="ts">
+  import { Bar } from 'svelte-chartjs'
+  import { theme } from '../../..';
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    LinearScale,
+    PointElement,
+    CategoryScale,
+    BarElement,
+  } from 'chart.js';
+  import { onMount, type ComponentProps } from 'svelte';
+  import lodash from 'lodash'
+
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    BarElement,
+    LinearScale,
+    PointElement,
+    CategoryScale
+  );
+
+  type TooltipLabelParameter = Parameters<NonNullable<NonNullable<NonNullable<NonNullable<NonNullable<ComponentProps<Bar>['options']>['plugins']>['tooltip']>['callbacks']>['label']>>[0]
+
+  export let data: {
+      labels: string[],
+      datasets: {
+        label: string,
+        data: number[],
+        backgroundColor?: string,
+        borderColor?: string,
+        hoverBackgroundColor?: string[]
+        tension?: number,
+      }[]
+    } = {
+      labels: [],
+      datasets: []
+    },
+    horizontal: boolean = false,
+    responsive: boolean = true,
+    maintainAspectRatio: boolean = true,
+    showLegend: boolean = true,
+    showYTicks: boolean = false,
+    showXTicks: boolean = false,
+    displayYGrid: boolean = true,
+    lineWidth: number = 1,
+    enableZoom: boolean = true,
+    resetZoom: boolean = false,
+    tooltipLabel: ((tooltip: TooltipLabelParameter) => string) | undefined = undefined,
+    yTickLabel: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined = undefined,
+    xTickLabel: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined = undefined,
+    xTickStepSize: number | undefined = undefined,
+    yTickStepSize: number | undefined = undefined,
+    xMax: number | undefined = undefined,
+    yMax: number | undefined = undefined,
+    rgbTooltipColor: string | undefined = undefined,
+    rgbTooltipBackgroundColor: string | undefined = undefined,
+    rgbBackgroundColor: string | undefined = undefined,
+    width: string | number | undefined = undefined,
+    height: string | number | undefined = undefined
+
+  let mounted: boolean = false,
+    zoomMounted: boolean = false
+
+  onMount(() => {
+    mounted = true
+  })
+
+
+  $: if(!rgbTooltipColor && !!$theme.colors?.[$theme.active]['dark']['primary']['300']) 
+    rgbTooltipColor = $theme.colors?.[$theme.active]['dark']['primary']['300']
+  $: if(!rgbTooltipBackgroundColor && !!$theme.colors?.[$theme.active]['dark']['primary']['900']) 
+    rgbTooltipBackgroundColor = $theme.colors?.[$theme.active]['dark']['primary']['900']
+  $: if(!rgbBackgroundColor && !!$theme.colors?.[$theme.active]['dark']['background']['200']) 
+    rgbBackgroundColor = $theme.colors?.[$theme.active]['dark']['background']['200']
+
+  $: finalTooltipColor = !!rgbTooltipColor ? `rgb(${rgbTooltipColor})` : undefined
+  $: finalTooltipBackgroundColor = !!rgbTooltipBackgroundColor ? `rgb(${rgbTooltipBackgroundColor})` : undefined
+  $: finalBackgroundColor = !!rgbBackgroundColor ? `rgb(${rgbBackgroundColor}, .3)` : undefined  
+
+  let chart: ComponentProps<Bar>['chart']
+  $: if(!!chart && !!enableZoom && !!resetZoom) {
+    chart.resetZoom()
+    resetZoom = false
   }
-$:
-  if (mounted) {
-    import("chartjs-plugin-zoom").then(({ default: zoomPlugin }) => {
-      ChartJS.register(zoomPlugin);
-      zoomMounted = true;
+
+  $: if(mounted) {
+    import('chartjs-plugin-zoom').then(({ default: zoomPlugin }) => {
+      ChartJS.register(zoomPlugin)
+      zoomMounted = true
       setTimeout(() => {
-        chart?.resetZoom();
+        chart?.resetZoom()
       }, 20);
-    });
+    })
   }
-let chartOptions;
-$:
-  chartOptions = {
-    barPercentage: 0.9,
-    borderRadius: 2,
-    categoryPercentage: 0.3,
-    indexAxis: horizontal ? "y" : "x",
-    responsive,
-    maintainAspectRatio,
-    plugins: {
-      tooltip: {
-        displayColors: false,
-        titleColor: finalTooltipColor,
-        backgroundColor: finalTooltipBackgroundColor,
-        titleFont: {
-          size: 14
-        },
-        bodyFont: {
-          size: 14,
-          weight: "bold"
+
+  let chartOptions: ComponentProps<Bar>['options']
+  $: chartOptions = {
+      barPercentage: 0.9,
+      borderRadius: 2,
+      categoryPercentage: 0.3,
+      indexAxis: horizontal ? 'y' : 'x',
+      responsive: responsive,
+      maintainAspectRatio: maintainAspectRatio,
+      plugins: {
+        tooltip: {
+          displayColors: false,
+          titleColor: finalTooltipColor,
+          backgroundColor: finalTooltipBackgroundColor,
+          titleFont: {
+            size: 14
+          },
+          bodyFont: {
+            size: 14,
+            weight: "bold"
+          },
+          callbacks: {
+            label: tooltipLabel
+          }
         },
-        callbacks: {
-          label: tooltipLabel
-        }
-      },
-      legend: {
-        display: showLegend
-      },
-      zoom: {
-        pan: {
-          enabled: enableZoom,
-          mode: "x",
-          modifierKey: "ctrl"
+        legend: {
+          display: showLegend
         },
         zoom: {
-          drag: {
-            enabled: enableZoom
+          pan: {
+            enabled: enableZoom,
+            mode: 'x',
+            modifierKey: 'ctrl',
+          },
+          zoom: {
+            drag: {
+              enabled: enableZoom
+            },
+            mode: 'x',
           },
-          mode: "x"
-        }
-      }
-    },
-    interaction: {
-      intersect: false
-    },
-    scales: {
-      x: {
-        max: xMax,
-        display: true,
-        title: {
-          display: true
-        },
-        grid: {
-          display: false
-        },
-        border: {
-          display: false
-        },
-        ticks: {
-          display: showXTicks,
-          callback: xTickLabel,
-          stepSize: xTickStepSize
         }
       },
-      y: {
-        max: yMax,
-        display: displayYGrid,
-        title: {},
-        grid: {
-          lineWidth,
-          color: finalBackgroundColor
-        },
-        border: {
-          dash: [10, 10],
-          display: false
+      interaction: {
+        intersect: false,
+      },
+      scales: {
+        x: {
+          max: xMax,
+          display: true,
+          title: {
+            display: true
+          },
+          grid: {
+            display: false
+          },
+          border: {
+            display: false
+          },
+          ticks: {
+            display: showXTicks,
+            callback: xTickLabel,
+            stepSize: xTickStepSize
+          }
         },
-        ticks: {
-          display: showYTicks,
-          callback: yTickLabel,
-          stepSize: yTickStepSize
+        y: {
+          max: yMax,
+          display: displayYGrid,
+          title: {
+          },
+          grid: {
+            lineWidth: lineWidth,
+            color: finalBackgroundColor
+          },
+          border: {
+            dash: [10,10],
+            display: false
+          },
+          ticks: {
+            display: showYTicks,
+            callback: yTickLabel,
+            stepSize: yTickStepSize
+          }
         }
       }
     }
-  };
 </script>
 
 <Bar

package/dist/components/simple/charts/GanymedeBarChart.svelte.d.ts

@@ -1,48 +1,52 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        data?: {
-            labels: string[];
-            datasets: {
-                label: string;
-                data: number[];
-                backgroundColor?: string | undefined;
-                borderColor?: string | undefined;
-                hoverBackgroundColor?: string[] | undefined;
-                tension?: number | undefined;
-            }[];
-        } | undefined;
-        horizontal?: boolean | undefined;
-        responsive?: boolean | undefined;
-        maintainAspectRatio?: boolean | undefined;
-        showLegend?: boolean | undefined;
-        showYTicks?: boolean | undefined;
-        showXTicks?: boolean | undefined;
-        displayYGrid?: boolean | undefined;
-        lineWidth?: number | undefined;
-        enableZoom?: boolean | undefined;
-        resetZoom?: boolean | undefined;
-        tooltipLabel?: ((tooltip: import("chart.js").TooltipItem<"bar">) => string) | undefined;
-        yTickLabel?: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined;
-        xTickLabel?: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined;
-        xTickStepSize?: number | undefined;
-        yTickStepSize?: number | undefined;
-        xMax?: number | undefined;
-        yMax?: number | undefined;
-        rgbTooltipColor?: string | undefined;
-        rgbTooltipBackgroundColor?: string | undefined;
-        rgbBackgroundColor?: string | undefined;
-        width?: string | number | undefined;
-        height?: string | number | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GanymedeBarChartProps = typeof __propDef.props;
-export type GanymedeBarChartEvents = typeof __propDef.events;
-export type GanymedeBarChartSlots = typeof __propDef.slots;
-export default class GanymedeBarChart extends SvelteComponent<GanymedeBarChartProps, GanymedeBarChartEvents, GanymedeBarChartSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const GanymedeBarChart: $$__sveltets_2_IsomorphicComponent<{
+    data?: {
+        labels: string[];
+        datasets: {
+            label: string;
+            data: number[];
+            backgroundColor?: string;
+            borderColor?: string;
+            hoverBackgroundColor?: string[];
+            tension?: number;
+        }[];
+    };
+    horizontal?: boolean;
+    responsive?: boolean;
+    maintainAspectRatio?: boolean;
+    showLegend?: boolean;
+    showYTicks?: boolean;
+    showXTicks?: boolean;
+    displayYGrid?: boolean;
+    lineWidth?: number;
+    enableZoom?: boolean;
+    resetZoom?: boolean;
+    tooltipLabel?: ((tooltip: unknown) => string) | undefined;
+    yTickLabel?: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined;
+    xTickLabel?: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined;
+    xTickStepSize?: number | undefined;
+    yTickStepSize?: number | undefined;
+    xMax?: number | undefined;
+    yMax?: number | undefined;
+    rgbTooltipColor?: string | undefined;
+    rgbTooltipBackgroundColor?: string | undefined;
+    rgbBackgroundColor?: string | undefined;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GanymedeBarChart = InstanceType<typeof GanymedeBarChart>;
+export default GanymedeBarChart;