@likable-hair/svelte 3.3.20 → 3.3.21

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

@@ -1,189 +1,151 @@
-<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
+<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;
   }
-
-  $: 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: 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
-          }
+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
         },
-        legend: {
-          display: showLegend
+        bodyFont: {
+          size: 14,
+          weight: "bold"
         },
-        zoom: {
-          pan: {
-            enabled: enableZoom,
-            mode: 'x',
-            modifierKey: 'ctrl',
-          },
-          zoom: {
-            drag: {
-              enabled: enableZoom
-            },
-            mode: 'x',
-          },
+        callbacks: {
+          label: tooltipLabel
         }
       },
-      interaction: {
-        intersect: false,
+      legend: {
+        display: showLegend
       },
-      scales: {
-        x: {
-          max: xMax,
-          display: true,
-          title: {
-            display: true
-          },
-          grid: {
-            display: false
-          },
-          border: {
-            display: false
-          },
-          ticks: {
-            display: showXTicks,
-            callback: xTickLabel,
-            stepSize: xTickStepSize
-          }
+      zoom: {
+        pan: {
+          enabled: enableZoom,
+          mode: "x",
+          modifierKey: "ctrl"
         },
-        y: {
-          max: yMax,
-          display: displayYGrid,
-          title: {
-          },
-          grid: {
-            lineWidth: lineWidth,
-            color: finalBackgroundColor
-          },
-          border: {
-            dash: [10,10],
-            display: false
+        zoom: {
+          drag: {
+            enabled: enableZoom
           },
-          ticks: {
-            display: showYTicks,
-            callback: yTickLabel,
-            stepSize: yTickStepSize
-          }
+          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
+        },
+        ticks: {
+          display: showYTicks,
+          callback: yTickLabel,
+          stepSize: yTickStepSize
         }
       }
     }
+  };
 </script>
 
 <Bar

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

@@ -1,52 +1,48 @@
-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;
+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;
     };
-    z_$$bindings?: Bindings;
-}
-declare const GanymedeBarChart: $$__sveltets_2_IsomorphicComponent<{
-    data?: {
-        labels: string[];
-        datasets: {
-            label: string;
-            data: number[];
-            backgroundColor?: string;
-            borderColor?: string;
-            hoverBackgroundColor?: string[];
-            tension?: number;
-        }[];
+    events: {
+        [evt: string]: CustomEvent<any>;
     };
-    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;
+    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> {
+}
+export {};