@likable-hair/svelte 4.2.5 → 4.3.0

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

@@ -1,129 +1,161 @@
-<script lang="ts">import { Chart, Tooltip, } from 'chart.js';
-import 'chart.js/auto';
-import 'chartjs-adapter-date-fns';
-import lodash from 'lodash';
-let { data, options: userOptions, resetZoom = $bindable(), ...rest } = $props();
-const defaultOptions = {
+<script lang="ts">
+  import {
+    Chart,
+    Tooltip,
+    type ChartData,
+    type ChartOptions,
+  } from 'chart.js';
+  import type { HTMLCanvasAttributes } from 'svelte/elements';
+  import 'chart.js/auto';
+  import 'chartjs-adapter-date-fns';
+  import lodash from 'lodash'
+
+  interface Props extends HTMLCanvasAttributes {
+    data: ChartData<'bar', number[], string>
+    options?: ChartOptions<'bar'>
+    resetZoom?: boolean
+  }
+
+  let { 
+    data,
+    options: userOptions,
+    resetZoom = $bindable(),
+    ...rest 
+  }: Props = $props();
+
+  const defaultOptions: ChartOptions<'bar'> = {
     bar: {
-        datasets: {
-            barPercentage: 0.9,
-            borderRadius: 2,
-            categoryPercentage: 0.3
-        }
+      datasets: {
+        barPercentage: 0.9,
+        borderRadius: 2,
+        categoryPercentage: 0.3
+      }
     },
     indexAxis: 'x', //horizontal ? 'y' : 'x'
     responsive: true, //responsive
-    maintainAspectRatio: true, //maintainAspectRatio 
+    maintainAspectRatio: true,  //maintainAspectRatio 
     plugins: {
-        tooltip: {
-            displayColors: false,
-            titleColor: undefined, //`rgb(${rgbTooltipColor})`
-            backgroundColor: undefined, //`rgb(${rgbTooltipBackgroundColor})`
-            titleFont: {
-                size: 14
-            },
-            bodyFont: {
-                size: 14,
-                weight: "bold"
-            },
-            callbacks: {
-                label: undefined //tooltipLabel
-            }
+      tooltip: {
+        displayColors: false,
+        titleColor: undefined,  //`rgb(${rgbTooltipColor})`
+        backgroundColor: undefined,  //`rgb(${rgbTooltipBackgroundColor})`
+        titleFont: {
+          size: 14
         },
-        legend: {
-            display: true //showLegend
+        bodyFont: {
+          size: 14,
+          weight: "bold"
         },
-        zoom: {
-            pan: {
-                enabled: true, //enableZoom
-                mode: 'x',
-                modifierKey: 'ctrl',
-            },
-            zoom: {
-                drag: {
-                    enabled: true //enableZoom
-                },
-                mode: 'x',
-            },
+        callbacks: {
+          label: undefined  //tooltipLabel
         }
+      },
+      legend: {
+        display: true //showLegend
+      },
+      zoom: {
+        pan: {
+          enabled: true,  //enableZoom
+          mode: 'x',
+          modifierKey: 'ctrl',
+        },
+        zoom: {
+          drag: {
+            enabled: true //enableZoom
+          },
+          mode: 'x',
+        },
+      }
     },
     interaction: {
-        intersect: false,
+      intersect: false,
     },
     scales: {
-        x: {
-            max: undefined, //xMax 
-            display: true,
-            title: {
-                display: true
-            },
-            grid: {
-                display: false
-            },
-            border: {
-                display: false
-            },
-            ticks: {
-                display: false, //showXTicks
-                callback: undefined, //xTickLabel
-                stepSize: undefined //xTickStepSize
-            }
+      x: {
+        max: undefined, //xMax 
+        display: true,
+        title: {
+          display: true
+        },
+        grid: {
+          display: false
+        },
+        border: {
+          display: false
+        },
+        ticks: {
+          display: false, //showXTicks
+          callback: undefined,  //xTickLabel
+          stepSize: undefined //xTickStepSize
+        }
+      },
+      y: {
+        max: undefined, //yMax
+        display: true,  //displayYGrid
+        title: {
+        },
+        grid: {
+          lineWidth: 1, //lineWidth
+          color: undefined,  //`rgb(${rgbBackgroundColor}, .3)`
+        },
+        border: {
+          dash: [10,10],
+          display: false
         },
-        y: {
-            max: undefined, //yMax
-            display: true, //displayYGrid
-            title: {},
-            grid: {
-                lineWidth: 1, //lineWidth
-                color: undefined, //`rgb(${rgbBackgroundColor}, .3)`
-            },
-            border: {
-                dash: [10, 10],
-                display: false
-            },
-            ticks: {
-                display: false, //showYTicks
-                callback: undefined, //yTickLabel
-                stepSize: undefined //yTickStepSize
-            }
+        ticks: {
+          display: false, //showYTicks
+          callback: undefined,  //yTickLabel
+          stepSize: undefined //yTickStepSize
         }
+      }
     }
-};
-let options = $derived(lodash.clone(lodash.merge(defaultOptions, userOptions)));
-Chart.register(Tooltip);
-let canvasElem, chart;
-$effect(() => {
-    import("chartjs-plugin-zoom").then(({ default: zoomPlugin }) => {
-        Chart.register(zoomPlugin);
-        setTimeout(() => {
-            if (!!chart.resetZoom)
-                chart.resetZoom();
-        }, 40);
-    });
+  }
+
+  let options: ChartOptions<'bar'> = $derived(
+    lodash.clone(lodash.merge(defaultOptions, userOptions))
+  )
+
+  Chart.register(Tooltip);
+
+  let canvasElem: HTMLCanvasElement,
+    chart: Chart;
+
+  $effect(() => {
+    import("chartjs-plugin-zoom").then(({ default: zoomPlugin}) => {
+      Chart.register(zoomPlugin)
+      setTimeout(() => {
+        if(!!chart.resetZoom)
+          chart.resetZoom()
+      }, 40);
+    })
+
     chart = new Chart(canvasElem, {
-        type: 'bar',
-        data,
-        options,
-    });
+      type: 'bar',
+      data,
+      options,
+    })
+
     return () => {
-        chart.destroy();
+      chart.destroy();
     };
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (chart) {
-        chart.data = data;
-        chart.update();
+      chart.data = data;
+      chart.update();
     }
-});
-$effect(() => {
-    if (!!chart && !!resetZoom && !!chart.resetZoom) {
-        setTimeout(() => {
-            if (!!chart.resetZoom)
-                chart.resetZoom();
-            resetZoom = false;
-        }, 40);
+  });
+
+  $effect(() => {
+    if(!!chart && !!resetZoom && !!chart.resetZoom) {
+      setTimeout(() => {
+        if(!!chart.resetZoom)
+          chart.resetZoom()
+          resetZoom = false
+      }, 40);
     }
-});
+  });
 </script>
 
 <canvas bind:this={canvasElem} {...rest}></canvas>

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

@@ -1,117 +1,149 @@
-<script lang="ts">import { Chart, Tooltip, } from 'chart.js';
-import lodash from 'lodash';
-import 'chart.js/auto';
-import 'chartjs-adapter-date-fns';
-let { data, options: userOptions = $bindable(), resetZoom = $bindable(), ...rest } = $props();
-const defaultOptions = {
+<script lang="ts">
+  import {
+    Chart,
+    Tooltip,
+    type ChartData,
+    type ChartOptions,
+  } from 'chart.js';
+  import type { HTMLCanvasAttributes } from 'svelte/elements';
+  import lodash from 'lodash'
+  import 'chart.js/auto';
+  import 'chartjs-adapter-date-fns';
+
+  interface Props extends HTMLCanvasAttributes {
+    data: ChartData<'line', number[], string>
+    options: ChartOptions<'line'>
+    resetZoom?: boolean
+  }
+
+  let { 
+    data,
+    options: userOptions = $bindable(),
+    resetZoom = $bindable(),
+    ...rest 
+  }: Props = $props();
+
+  const defaultOptions: ChartOptions<'line'> = {
     indexAxis: 'x', //horizontal ? 'y' : 'x'
     responsive: true, //responsive
-    maintainAspectRatio: true, //maintainAspectRatio
+    maintainAspectRatio: true,  //maintainAspectRatio
     elements: {
-        line: {
-            borderWidth: 3 //lineWidth
-        },
-        point: {
-            radius: undefined, //pointRadius
-            hitRadius: undefined, //hitRadius
-            hoverRadius: undefined //hoverRadius
-        }
+      line: {
+        borderWidth: 3  //lineWidth
+      },
+      point: {
+        radius: undefined,  //pointRadius
+        hitRadius: undefined, //hitRadius
+        hoverRadius: undefined  //hoverRadius
+      }
     },
     plugins: {
-        legend: {
-            display: true //showLegend
+      legend: {
+        display: true //showLegend
+      },
+      zoom: {
+        pan: {
+          enabled: true, //enableZoom
+          mode: 'x',
+          modifierKey: 'ctrl',
         },
         zoom: {
-            pan: {
-                enabled: true, //enableZoom
-                mode: 'x',
-                modifierKey: 'ctrl',
-            },
-            zoom: {
-                drag: {
-                    enabled: true //enableZoom
-                },
-                mode: 'x',
-            },
+          drag: {
+            enabled: true //enableZoom
+          },
+          mode: 'x',
         },
-        tooltip: {
-            enabled: true //!tooltipsDisabled
-        }
+      },
+      tooltip: {
+        enabled: true //!tooltipsDisabled
+      }
     },
     interaction: {
-        intersect: false,
+      intersect: false,
     },
     scales: {
-        x: {
-            max: undefined, //xMax
-            min: undefined, //xMin
-            display: true, //displayXGrid
-            title: {
-                display: true
-            },
-            grid: {
-                display: false
-            },
-            border: {
-                display: false
-            },
-            ticks: {
-                display: false, //showYTicks
-                stepSize: undefined //yTickStepSize
-            }
+      x: {
+        max: undefined, //xMax
+        min: undefined, //xMin
+        display: true,  //displayXGrid
+        title: {
+          display: true
+        },
+        grid: {
+          display: false
+        },
+        border: {
+          display: false
+        },
+        ticks: {
+          display: false, //showYTicks
+          stepSize: undefined //yTickStepSize
+        }
+      },
+      y: {
+        max: undefined, //yMax
+        min: undefined, //yMin
+        display: true,  //displayYGrid
+        title: {
         },
-        y: {
-            max: undefined, //yMax
-            min: undefined, //yMin
-            display: true, //displayYGrid
-            title: {},
-            grid: {
-                lineWidth: 1, //gridLineWidth
-                color: undefined, //'rgb(' + (style.getPropertyValue('--global-color-background-200') || '200, 200, 200') + ', .3)'
-            },
-            border: {
-                dash: [10, 10],
-                display: false
-            },
-            ticks: {
-                display: false, //showXTicks
-                stepSize: undefined //xTickStepSize
-            }
+        grid: {
+          lineWidth: 1, //gridLineWidth
+          color: undefined, //'rgb(' + (style.getPropertyValue('--global-color-background-200') || '200, 200, 200') + ', .3)'
+        },
+        border: {
+          dash: [10,10],
+          display: false
+        },
+        ticks: {
+          display: false, //showXTicks
+          stepSize: undefined //xTickStepSize
         }
+      }
     }
-};
-let options = $derived(lodash.clone(lodash.merge(defaultOptions, userOptions)));
-Chart.register(Tooltip);
-let canvasElem, chart;
-$effect(() => {
+  }
+
+  let options: ChartOptions<'line'> = $derived(
+    lodash.clone(lodash.merge(defaultOptions, userOptions))
+  )
+
+  Chart.register(Tooltip);
+
+  let canvasElem: HTMLCanvasElement,
+    chart: Chart;
+
+  $effect(() => {
     import('chartjs-plugin-zoom').then(({ default: zoomPlugin }) => {
-        Chart.register(zoomPlugin);
-        setTimeout(() => {
-            if (!!chart.resetZoom)
-                chart.resetZoom();
-        }, 40);
-    });
+      Chart.register(zoomPlugin)
+      setTimeout(() => {
+        if(!!chart.resetZoom)
+          chart.resetZoom()
+      }, 40);
+    })
+
     chart = new Chart(canvasElem, {
-        type: 'line',
-        data,
-        options,
-    });
+      type: 'line',
+      data,
+      options,
+    })
+
     return () => {
-        chart.destroy();
+      chart.destroy();
     };
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (chart) {
-        chart.data = data;
-        chart.update();
+      chart.data = data;
+      chart.update();
     }
-});
-$effect(() => {
-    if (!!chart && !!resetZoom) {
-        chart.resetZoom();
-        resetZoom = false;
+  });
+
+  $effect(() => {
+    if(!!chart && !!resetZoom) {
+      chart.resetZoom()
+      resetZoom = false
     }
-});
+  });
 </script>
 
 <canvas bind:this={canvasElem} {...rest}></canvas>

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

@@ -1,36 +1,64 @@
-<script lang="ts">import { Chart, Tooltip, } from 'chart.js';
-import lodash from 'lodash';
-import 'chart.js/auto';
-import 'chartjs-adapter-date-fns';
-let { data = $bindable(), options: userOptions = $bindable(), chart = $bindable(), ...rest } = $props();
-const defaultOptions = {
+<script lang="ts">
+  import {
+    Chart,
+    Tooltip,
+    type ChartData,
+    type ChartOptions,
+  } from 'chart.js';
+  import type { HTMLCanvasAttributes } from 'svelte/elements';
+  import lodash from 'lodash'
+  import 'chart.js/auto';
+  import 'chartjs-adapter-date-fns';
+
+  interface Props extends HTMLCanvasAttributes {
+    data: ChartData<'pie', number[], string>;
+    options?: ChartOptions<'pie'>;
+    chart?: Chart;
+  }
+
+  let { 
+    data = $bindable(),
+    options: userOptions = $bindable(),
+    chart = $bindable(),
+    ...rest 
+  }: Props = $props();
+
+  const defaultOptions: ChartOptions<'pie'> = {
     responsive: true, //responsive
     maintainAspectRatio: false, //maintainAspectRatio
     plugins: {
-        legend: {
-            display: true //showLegend
-        }
+      legend: {
+        display: true //showLegend
+      }
     }
-};
-let options = $derived(lodash.clone(lodash.merge(defaultOptions, userOptions)));
-Chart.register(Tooltip);
-let canvasElem;
-$effect(() => {
+  }
+
+  let options: ChartOptions<'pie'> = $derived(
+    lodash.clone(lodash.merge(defaultOptions, userOptions))
+  )
+
+  Chart.register(Tooltip);
+
+  let canvasElem: HTMLCanvasElement;
+
+  $effect(() => {
     chart = new Chart(canvasElem, {
-        type: 'pie',
-        data: data,
-        options,
+      type: 'pie',
+      data: data,
+      options,
     });
+
     return () => {
-        chart?.destroy();
+      chart?.destroy();
     };
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (chart) {
-        chart.data = data;
-        chart.update();
+      chart.data = data;
+      chart.update();
     }
-});
+  });
 </script>
 
 <canvas bind:this={canvasElem} {...rest}></canvas>