replace echarts with layercake

src/lib/components/Feedback.svelte

@@ -92,6 +92,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
 </svelte:head>
   
+<svelte:options immutable={true}/>
 
   
   <div class="fixed z-[100] bottom-8 sm:bottom-10 right-8 sm:right-16">

src/lib/components/LayerCake/Bar/AxisX.svelte

@@ -0,0 +1,119 @@
+<!--
+  @component
+  Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+ <script>
+    import { getContext } from 'svelte';
+  
+    const { width, height, xScale, yRange } = getContext('LayerCake');
+  
+    /** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
+    export let tickMarks = false;
+  
+    /** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+    export let gridlines = true;
+  
+    /** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+    export let tickMarkLength = 6;
+  
+    /** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
+    export let baseline = false;
+  
+    /** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
+    export let snapLabels = false;
+  
+    /** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+    export let format = d => d;
+  
+    /** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+    export let ticks = undefined;
+  
+    /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+    export let tickGutter = 0;
+  
+    /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+    export let dx = 0;
+  
+    /** @type {Number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
+    export let dy = 12;
+  
+    function textAnchor(i, sl) {
+      if (sl === true) {
+        if (i === 0) {
+          return 'start';
+        }
+        if (i === tickVals.length - 1) {
+          return 'end';
+        }
+      }
+      return 'middle';
+    }
+  
+    $: tickLen = tickMarks === true ? tickMarkLength ?? 6 : 0;
+  
+    $: isBandwidth = typeof $xScale.bandwidth === 'function';
+  
+    $: tickVals = Array.isArray(ticks)
+      ? ticks
+      : isBandwidth
+        ? $xScale.domain()
+        : typeof ticks === 'function'
+          ? ticks($xScale.ticks())
+          : $xScale.ticks(ticks);
+  
+    $: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0;
+  </script>
+  
+  <g class="axis x-axis" class:snapLabels>
+    {#each tickVals as tick, i (tick)}
+      {#if baseline === true}
+        <line class="baseline" y1={$height} y2={$height} x1="0" x2={$width} />
+      {/if}
+  
+      <g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
+        {#if gridlines === true}
+          <line class="gridline" x1={halfBand} x2={halfBand} y1={-$height} y2="0" />
+        {/if}
+        {#if tickMarks === true}
+          <line
+            class="tick-mark"
+            x1={halfBand}
+            x2={halfBand}
+            y1={tickGutter}
+            y2={tickGutter + tickLen}
+          />
+        {/if}
+        <text x={halfBand} y={tickGutter + tickLen} {dx} {dy} text-anchor={textAnchor(i, snapLabels)}
+          >{format(tick)}</text
+        >
+      </g>
+    {/each}
+  </g>
+  
+  <style>
+    .tick {
+      font-size: 11px;
+    }
+  
+    line,
+    .tick line {
+      stroke: #aaa;
+      stroke-dasharray: 2;
+    }
+  
+    .tick text {
+      fill: #666;
+    }
+  
+    .tick .tick-mark,
+    .baseline {
+      stroke-dasharray: 0;
+    }
+    /* This looks slightly better */
+    .axis.snapLabels .tick:last-child text {
+      transform: translateX(3px);
+    }
+    .axis.snapLabels .tick.tick-0 text {
+      transform: translateX(-3px);
+    }
+  </style>

src/lib/components/LayerCake/Bar/AxisY.svelte

@@ -0,0 +1,119 @@
+<!--
+  @component
+  Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
+ -->
+ <script>
+  import { getContext } from 'svelte';
+
+  const { xRange, yScale, width } = getContext('LayerCake');
+
+  /** @type {Boolean} [tickMarks=false] - Show marks next to the tick label. */
+  export let tickMarks = false;
+
+  /** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+  export let labelPosition = 'even';
+
+  /** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+  export let snapBaselineLabel = false;
+
+  /** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+  export let gridlines = true;
+
+  /** @type {Number} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+  export let tickMarkLength = undefined;
+
+  /** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+  export let format = d => d;
+
+  /** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+  export let ticks = 4;
+
+  /** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+  export let tickGutter = 2;
+
+  /** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+  export let dx = 0;
+
+  /** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+  export let dy = 0;
+
+  /** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+  export let charPixelWidth = 7.25;
+
+  $: isBandwidth = typeof $yScale.bandwidth === 'function';
+
+  $: tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBandwidth
+      ? $yScale.domain()
+      : typeof ticks === 'function'
+        ? ticks($yScale.ticks())
+        : $yScale.ticks(ticks);
+
+  function calcStringLength(sum, val) {
+    if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
+    return sum + charPixelWidth;
+  }
+
+  $: tickLen =
+    tickMarks === true
+      ? labelPosition === 'above'
+        ? tickMarkLength ?? widestTickLen
+        : tickMarkLength ?? 6
+      : 0;
+
+  $: widestTickLen = Math.max(
+    10,
+    Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0)))
+  );
+
+  $: x1 = -tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen);
+  $: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
+
+  $: maxTickValPx = Math.max(...tickVals.map($yScale));
+</script>
+
+<g class="axis y-axis">
+  {#each tickVals as tick (tick)}
+    {@const tickValPx = $yScale(tick)}
+    <g class="tick tick-{tick}" transform="translate({$xRange[0]}, {tickValPx})">
+      {#if gridlines === true}
+        <line class="gridline" {x1} x2={$width} y1={y} y2={y}></line>
+      {/if}
+      {#if tickMarks === true}
+        <line class="tick-mark" {x1} x2={x1 + tickLen} y1={y} y2={y}></line>
+      {/if}
+      <text
+        x={x1}
+        {y}
+        dx={dx + (labelPosition === 'even' ? -3 : 0)}
+        text-anchor={labelPosition === 'above' ? 'start' : 'end'}
+        dy={dy +
+          (labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx)
+            ? -3
+            : 4)}>{format(tick)}</text
+      >
+    </g>
+  {/each}
+</g>
+
+<style>
+  .tick {
+    font-size: 11px;
+  }
+
+  .tick line {
+    stroke: #aaa;
+  }
+  .tick .gridline {
+    stroke-dasharray: 2;
+  }
+
+  .tick text {
+    fill: #666;
+  }
+
+  .tick.tick-0 line {
+    stroke-dasharray: 0;
+  }
+</style>

src/lib/components/LayerCake/Bar/Bar.svelte

@@ -0,0 +1,26 @@
+<!--
+  @component
+  Generates an SVG bar chart.
+ -->
+ <script>
+    import { getContext } from 'svelte';
+  
+    const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
+  
+    /** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+    export let fill = '#fff';
+  </script>
+  
+  <g class="bar-group">
+    {#each $data as d, i}
+      <rect
+        class="group-rect"
+        data-id={i}
+        x={$xScale.range()[0]}
+        y={$yGet(d)}
+        height={$yScale.bandwidth()}
+        width={$xGet(d)}
+        {fill}
+      ></rect>
+    {/each}
+  </g>

src/routes/home/+page.svelte

@@ -11,20 +11,15 @@
   import Activity from "lucide-svelte/icons/activity";
   import { abbreviateNumber, formatDate } from '$lib/utils';
   
-  import {  numberOfUnreadNotification, screenWidth} from '$lib/store';
+  import {  numberOfUnreadNotification} from '$lib/store';
-  import Lazy from 'svelte-lazy';
-
-  import { Chart } from 'svelte-echarts'
-
-import { init, use } from 'echarts/core'
-import { BarChart } from 'echarts/charts'
-import { GridComponent } from 'echarts/components'
-
-  // now with tree-shaking
-  use([BarChart, GridComponent])
 
+  import { LayerCake, Svg } from 'layercake';
+  import { scaleBand } from 'd3-scale';
+  import Bar from '$lib/components/LayerCake/Bar/Bar.svelte';
+  import AxisY from '$lib/components/LayerCake/Bar/AxisY.svelte';
 
   export let data;
+  let isLoaded = false;
 
   const quickInfo = data?.getDashboard?.quickInfo;
 
@@ -49,68 +44,15 @@ function latestInfoDate(inputDate) {
     return differenceInDays <=1;
 }
 
-const tickerGraphName = data?.getDashboard?.retailTracker?.map(item => item?.symbol) || [];
-const tradedList = data?.getDashboard?.retailTracker?.map(item => item?.traded) || [];
 
-const optionsGraph = {
+const xKey = 'traded';
-  animation: $screenWidth < 640 ? false: true,
+const yKey = 'symbol';
-  grid: {
-    left: '2%',
-    right: '3%',
-    bottom: '6%',
-    top: '0%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'value',
-    splitLine: {
-      show: false, // Disable x-axis grid lines
-    },
-    axisLabel: {
-      show: false // Hide x-axis labels
-    },
-    axisTick: {
-      show: false // Hide x-axis ticks
-    },
-    axisLine: {
-      show: false // Hide x-axis line
-    }
-  },
-  yAxis: {
-    type: 'category',
-    data: tickerGraphName,
-    inverse: true,
-    axisTick: {
-      show: false // Hide x-axis ticks
-    },
-  },
-  series: [
-    {
-      data: tradedList,
-      label: {
-        show: true,
-        position: 'inside',
-        formatter: function(params) {
-          return abbreviateNumber(params?.value,true);
-        },
-        fontWeight: 600
-      },
-      type: 'bar',
-      showBackground: true,
-      backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
-      },
-      itemStyle: {
-        color: 'white'  // Bar color is white
-      }
-    }
-  ]
-};
 
 let Feedback;
 
 onMount( async() => {
   Feedback = (await import('$lib/components/Feedback.svelte')).default
+  isLoaded = true;
 })
 
 
@@ -310,17 +252,31 @@ onMount( async() => {
                 </div>
               </Card.Header>
               <Card.Content>                
-                <div class="pb-2 rounded-lg bg-[#09090B]">
+                {#if data?.getDashboard?.retailTracker?.length !== 0 && isLoaded}
-                
+                  <div class="chart-container">
-          
+                    <LayerCake
-                  <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
+                      padding={{ bottom: 20, left: 35 }}
-                      <div class="app w-full h-[300px] mt-5">
+                      x={xKey}
-                          <Chart {init} options={optionsGraph} class="chart" />
+                      y={yKey}
+                      yScale={scaleBand().paddingInner(0.2)}
+                      xDomain={[0, null]}
+                      data={data?.getDashboard?.retailTracker}
+                    >
+                      <Svg>
+                        <AxisY tickMarks gridlines={false} />
+                        <Bar />
+                      </Svg>
+                    </LayerCake>
                   </div>
-                  </Lazy>
+                  {:else}
-              
+                  <div class="flex justify-center items-center h-80">
+                    <div class="relative">
+                    <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <span class="loading loading-spinner loading-md"></span>
+                    </label>
                     </div>
-        
+                </div>
+                  {/if}
               </Card.Content>
             </Card.Root>
           </div>
@@ -420,22 +376,10 @@ onMount( async() => {
   
 <style>
 
-.app {
+   .chart-container {
-  height: 250px;
-  max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  
-  }
-  
-  @media (max-width: 640px) {
-  .app {
-    height: 210px;
-  }
-  }
-  
-  .chart {
     width: 100%;
+    height: 250px;
   }
-
 .scrollbar {
     display: grid;
     grid-gap: 90px;