Use $ctrl less

spraakbanken · May 24, 2024 · 244dbec · 244dbec
1 parent fcddf18
commit 244dbec
Showing 1 changed file with 66 additions and 75 deletions.
diff --git a/app/scripts/components/corpus_chooser/corpus-time-graph.ts b/app/scripts/components/corpus_chooser/corpus-time-graph.ts
@@ -1,5 +1,5 @@
 /** @format */
-import angular, { IController, IRootScopeService } from "angular"
+import angular, { IRootScopeService } from "angular"
 import range from "lodash/range"
 import { Chart } from "chart.js/auto"
 import { getLang, loc } from "@/i18n"
@@ -18,8 +18,6 @@ angular.module("korpApp").component("corpusTimeGraph", {
     controller: [
         "$rootScope",
         function ($rootScope: IRootScopeService) {
-            const $ctrl = this as CorpusTimeGraphController
-
             const { min, max } = getSpan()
 
             const datasetsDated = [
@@ -57,91 +55,84 @@ angular.module("korpApp").component("corpusTimeGraph", {
             }
             updateSelectedData()
 
-            $ctrl.$onInit = () => {
-                const container = document.getElementById("time-graph-chart") as HTMLCanvasElement
-                $ctrl.chart = new Chart(container, {
-                    type: "bar",
-                    data: getCountUndated()
-                        ? {
-                              // Labels need to be strings to match with the `{[year]: count}` format of the datasets.
-                              // `max + 1` because `range` excludes end value.
-                              labels: range(min, undatedFakeYear + 1).map(String),
-                              datasets: [...datasetsDated, ...datasetsUndated],
-                          }
-                        : {
-                              labels: range(min, max + 1).map(String),
-                              datasets: datasetsDated,
-                          },
-                    options: {
-                        scales: {
-                            y: {
-                                display: false,
-                                beginAtZero: true,
-                            },
-                            x: {
-                                ticks: {
-                                    autoSkip: false,
-                                },
-                                // Calculate what years to label. Subtract `min` because Chart.js wants the indices, not the labels.
-                                afterBuildTicks: (axis) =>
-                                    (axis.ticks = calculateYearTicks(min, max).map((v) => ({ value: v - min }))),
-                            },
+            const chart = new Chart(document.getElementById("time-graph-chart") as HTMLCanvasElement, {
+                type: "bar",
+                data: getCountUndated()
+                    ? {
+                          // Labels need to be strings to match with the `{[year]: count}` format of the datasets.
+                          // `max + 1` because `range` excludes end value.
+                          labels: range(min, undatedFakeYear + 1).map(String),
+                          datasets: [...datasetsDated, ...datasetsUndated],
+                      }
+                    : {
+                          labels: range(min, max + 1).map(String),
+                          datasets: datasetsDated,
+                      },
+                options: {
+                    scales: {
+                        y: {
+                            display: false,
+                            beginAtZero: true,
                         },
-                        datasets: {
-                            bar: {
-                                // Show bars behind each other, not next to.
-                                grouped: false,
-                                // Eliminate space between bars
-                                categoryPercentage: 1.0,
-                                barPercentage: 1.0,
-                                // Make low-resource years show more
-                                minBarLength: 2,
+                        x: {
+                            ticks: {
+                                autoSkip: false,
                             },
+                            // Calculate what years to label. Subtract `min` because Chart.js wants the indices, not the labels.
+                            afterBuildTicks: (axis) =>
+                                (axis.ticks = calculateYearTicks(min, max).map((v) => ({ value: v - min }))),
                         },
-                        locale: getLang(),
-                        plugins: {
-                            legend: {
-                                display: false,
+                    },
+                    datasets: {
+                        bar: {
+                            // Show bars behind each other, not next to.
+                            grouped: false,
+                            // Eliminate space between bars
+                            categoryPercentage: 1.0,
+                            barPercentage: 1.0,
+                            // Make low-resource years show more
+                            minBarLength: 2,
+                        },
+                    },
+                    locale: getLang(),
+                    plugins: {
+                        legend: {
+                            display: false,
+                        },
+                        tooltip: {
+                            caretSize: 0,
+                            yAlign: "bottom",
+                            callbacks: {
+                                title: (items) =>
+                                    Number(items[0].label) < undatedFakeYear
+                                        ? `${loc("corpselector_year")} ${items[0].label}`
+                                        : loc("corpselector_undated"),
                             },
-                            tooltip: {
-                                caretSize: 0,
-                                yAlign: "bottom",
-                                callbacks: {
-                                    title: (items) =>
-                                        Number(items[0].label) < undatedFakeYear
-                                            ? `${loc("corpselector_year")} ${items[0].label}`
-                                            : loc("corpselector_undated"),
-                                },
-                                // See `defaults` in https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.tooltip.js
-                                animations: {
-                                    opacity: {
-                                        duration: 100,
-                                    },
+                            // See `defaults` in https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.tooltip.js
+                            animations: {
+                                opacity: {
+                                    duration: 100,
                                 },
                             },
                         },
-                        interaction: {
-                            mode: "nearest",
-                            axis: "x",
-                            intersect: false,
-                        },
-                        animation: {
-                            duration: 200,
-                        },
                     },
-                })
-            }
+                    interaction: {
+                        mode: "nearest",
+                        axis: "x",
+                        intersect: false,
+                    },
+                    animation: {
+                        duration: 200,
+                    },
+                },
+            })
 
-            $rootScope.$on("corpuschooserchange", (e) => {
+            $rootScope.$on("corpuschooserchange", () => {
                 updateSelectedData()
                 // `'none'` to disable animations. Animations would be nice, but they look weird when new data has different min/max year.
                 // TODO Do animations look better if data is given as array including empty years, not a record?
-                $ctrl.chart.update("none")
+                chart.update("none")
             })
         },
     ],
 })
-
-type CorpusTimeGraphController = IController & {
-    chart: Chart<"bar", Record<number, number>>
-}