|
9 | 9 | axisLeft, |
10 | 10 | axisBottom |
11 | 11 | } from "d3"; |
12 | | - import { beforeUpdate, onDestroy, onMount } from "svelte"; |
| 12 | + import { onDestroy, onMount } from "svelte"; |
13 | 13 | //TODO - import dependency on local |
14 | 14 | import { roundOffToNdigitsAfterDecimal } from "@21n/products/pointron/pointron.utils"; |
15 | 15 | import { |
|
20 | 20 | import { generateUID } from "@21n/utils/utils"; |
21 | 21 | import appearance from "@21n/stores/appearance.store"; |
22 | 22 |
|
23 | | - let data: ChartDataPoint[] = []; |
24 | | - let options: BarChartOptions; |
25 | | - let orientation: Orientation = Orientation.Vertical; |
26 | | - let themeColors = retrieveCurrentColors($appearance); |
| 23 | + let { |
| 24 | + data = [], |
| 25 | + options, |
| 26 | + orientation = Orientation.Vertical |
| 27 | + }: { |
| 28 | + data?: ChartDataPoint[]; |
| 29 | + options: BarChartOptions; |
| 30 | + orientation?: Orientation; |
| 31 | + } = $props(); |
| 32 | +
|
| 33 | + let themeColors = $state(retrieveCurrentColors($appearance)); |
27 | 34 | const chartID = generateUID(); |
28 | 35 |
|
29 | | - export { data, options, orientation }; |
30 | | -
|
31 | | - let containerRef: any = null; |
32 | | - let scrollableElementContainerRef: any = null; |
33 | | - let fixedXAxisRef: any = null; |
34 | | - let fixedYAxisRef: any = null; |
35 | | - let legendContainerRef: any = null; |
36 | | - let wrapperRef: any = null; |
37 | | - let informationModal: any = null; |
38 | | - let previouslyCheckedItem: HTMLInputElement; |
| 36 | + let containerRef = $state<any>(null); |
| 37 | + let scrollableElementContainerRef = $state<any>(null); |
| 38 | + let fixedXAxisRef = $state<any>(null); |
| 39 | + let fixedYAxisRef = $state<any>(null); |
| 40 | + let legendContainerRef = $state<any>(null); |
| 41 | + let wrapperRef = $state<any>(null); |
| 42 | + let informationModal = $state<any>(null); |
| 43 | + let previouslyCheckedItem = $state<HTMLInputElement>(); |
39 | 44 | // let previouslyCheckedId: string = ""; |
40 | 45 |
|
41 | 46 | let currentDataLength: number = 0; |
|
46 | 51 | let sanitizedData: ChartDataPoint[] = []; |
47 | 52 | // in sanitizedData we will be modifying the data so that if there are multiple data items present with same key then we will only be considering the first one and will be ignoring the rest |
48 | 53 |
|
49 | | - let groups: string[] = []; |
| 54 | + let groups = $state<string[]>([]); |
50 | 55 |
|
51 | | - let selectedGroups: string[] = []; |
| 56 | + let selectedGroups = $state<string[]>([]); |
52 | 57 |
|
53 | 58 | let BARS_AND_AXIS_SVG: any = null; |
54 | 59 | let FIXED_AXIS_GROUP: any = null; |
| 60 | + let isMounted = false; |
55 | 61 |
|
56 | | - let colors: { [key: string]: string }[] = []; |
| 62 | + let colors = $state<Record<string, string>>({}); |
57 | 63 |
|
58 | | - let mouseHoverData: ChartDataPoint = { key: "", value: 0, group: "" }; |
| 64 | + let mouseHoverData = $state<ChartDataPoint>({ |
| 65 | + key: "", |
| 66 | + value: 0, |
| 67 | + group: "" |
| 68 | + }); |
59 | 69 |
|
60 | 70 | // Please write these values along with their units |
61 | 71 | const DEFAULT_CONTAINER_DIMENSIONS = { |
|
169 | 179 | "filteredData for id ", |
170 | 180 | id + " is " + filteredData.map((d) => d.key) |
171 | 181 | ); |
172 | | - BARS_AND_AXIS_SVG.remove(); |
173 | | - FIXED_AXIS_GROUP.remove(); |
174 | | - paintGraph(); |
175 | | - handleEventListeningForBars(); |
| 182 | + repaintGraph(); |
176 | 183 | previouslyCheckedItem = currentlyCheckedItem; |
177 | 184 | } |
178 | 185 |
|
|
202 | 209 | // return selectedGroups.includes(d.group); |
203 | 210 | // });//*this is done so that the chart is rendered with the data that is present at the time of mounting |
204 | 211 |
|
205 | | - BARS_AND_AXIS_SVG.remove(); |
206 | | - FIXED_AXIS_GROUP.remove(); |
| 212 | + repaintGraph(); |
| 213 | + } |
| 214 | +
|
| 215 | + function repaintGraph() { |
| 216 | + if (!isMounted) return; |
| 217 | + BARS_AND_AXIS_SVG?.remove(); |
| 218 | + FIXED_AXIS_GROUP?.remove(); |
| 219 | + BARS_AND_AXIS_SVG = null; |
| 220 | + FIXED_AXIS_GROUP = null; |
207 | 221 | paintGraph(); |
208 | 222 | handleEventListeningForBars(); |
209 | 223 | } |
|
760 | 774 | } |
761 | 775 |
|
762 | 776 | paintGraph(); |
| 777 | + isMounted = true; |
763 | 778 |
|
764 | 779 | if (scrollableElementContainerRef) { |
765 | 780 | scrollableElementContainerRef.addEventListener("scroll", detectScrollEnd); |
766 | 781 | } |
767 | 782 | handleEventListeningForBars(); |
768 | 783 | }); |
769 | 784 |
|
770 | | - beforeUpdate(() => { |
| 785 | + $effect.pre(() => { |
771 | 786 | refreshDerivedState(); |
| 787 | + if (isMounted) { |
| 788 | + filteredData = previouslyCheckedItem |
| 789 | + ? data.filter((d) => d.group === previouslyCheckedItem.value) |
| 790 | + : data; |
| 791 | + repaintGraph(); |
| 792 | + } |
772 | 793 | }); |
773 | 794 |
|
774 | 795 | onDestroy(() => { |
|
0 commit comments