src/lib/ui/Chart.svelte

   1 <script>
   2     import { beforeUpdate, onMount } from 'svelte';
   3     import {sex,nex,haks,fatal,hak,map} from "$lib/Y/Pic"
   4     import Chart from 'chart.js/auto'; // Auto import for all chart types
   5
   6     export let spam = {}
   7     export let vers
   8
   9     let chartContainer;
  10     let myChart;
  11     // what it's along
  12     let x = null
  13     // several ups
  14     let ys = []
  15
  16     let init = () => {
  17         // done already
  18         if (myChart) return
  19         const ctx = chartContainer.getContext('2d');
  20         fatal.isob(ctx)
  21
  22         if (!hak(spam.N)) return
  23
  24         // elect an x axis label
  25         let label_looking = 'now,time,x'
  26         let labelly = {}
  27         spam.N.map(q => sex(labelly,q,label_looking))
  28         let label = haks(labelly)[0]
  29         fatal.isst(label)
  30         x = label
  31         // put others on the y axis
  32         let datatic = {}
  33         spam.N.map(q => nex(datatic,q,label_looking))
  34         ys = haks(datatic)
  35
  36         let colours = [
  37             'green','blue','red','beige','orange','brown','pink'
  38         ]
  39         let datasets = map((k) => { return {
  40             label: k,
  41             // data: geometryHistory.map(entry => entry.width),
  42             borderColor: colours.shift()
  43         } }, ys)
  44         myChart = new Chart(ctx, {
  45             type: 'line', // Start with a line chart
  46             data: {datasets},
  47             options: {
  48                 // You can add customization options here if you like
  49             }
  50         });
  51         console.log("Init'd Chart", datasets)
  52     }
  53     onMount(() => {
  54         init()
  55     });
  56
  57     // Update chart when data changes!!!!!!!
  58     let spams = 0
  59     $: if (vers, spam && myChart && hak(spam.N)) {
  60         init()
  61         spams = hak(spam.N)
  62
  63         // x labels? jaink?
  64         myChart.data.labels = spam.N.map(q => q[x])
  65
  66         let i = 0
  67         map((k) => {
  68             myChart.data.datasets[i] ||= {}
  69             myChart.data.datasets[i].data = spam.N.map(q => q[k])
  70         }, ys)
  71
  72         myChart.update();
  73         console.log("Upd'd Chart")
  74     }
  75     spam.update = (a) => {
  76         spam = spam
  77         console.log("spamn update")
  78     }
  79     console.log("charted")
  80 </script>
  81  <div>
  82 <p>{spams} spams</p>
  83 <canvas bind:this={chartContainer} style="position:relative;"></canvas>
  84 </div>
  85 <style>
  86     div {
  87         border: 2em solid purple;
  88     }
  89 </style>