⬆️ upgrade highcharts/dashboards

volatile-static · Jun 16, 2024 · 4243d31 · 4243d31
1 parent 013dd92
commit 4243d31
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 535 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "homepage": "https://github.com/volatile-static/Chartero",
     "releasepage": "https://github.com/volatile-static/Chartero/releases/latest/download/chartero.xpi",
     "dependencies": {
-        "@highcharts/dashboards": "^1.3.1",
+        "@highcharts/dashboards": "^2.1.0",
         "animejs": "^3.2.2",
         "compromise": "^14.12.0",
         "compromise-stats": "^0.1.0",

diff --git a/src/vue/overview/main.vue b/src/vue/overview/main.vue
@@ -131,15 +131,14 @@ export default {
                             { id: 'cell-schedule' },
                             {
                                 id: 'cell-r1-c2',
-                                width: '700px',
                                 layout: {
                                     rows: [
-                                        { cells: [{ id: 'cell-skyline', height: '130px' }] },
+                                        { cells: [{ id: 'cell-skyline' }] },
                                         {
                                             cells: [
-                                                { id: 'cell-pie', width: '60%' },
+                                                { id: 'cell-pie' },
                                                 // { id: 'cell-kpi' },
-                                                { id: 'cell-progress', width: '40%' }
+                                                { id: 'cell-progress' }
                                             ]
                                         }
                                     ]
@@ -194,7 +193,9 @@ export default {
                     tooltip: {
                         useHTML: true,
                         pointFormatter () {
-                            const dot = `<span style="color: var(--highcharts-color-${this.colorIndex})">\u25CF</span>`;
+                            const dot = `<span style="color: var(--highcharts-color-${
+                                    this.colorIndex
+                                })">\u25CF</span>`;
                             return `
                                 ${dot} ${addon.locale.itemsCount}: <b>${this.y}</b><br/>
                                 ${dot} ${addon.locale.totalTime}: <b>${toTimeString((this as any).z)}</b>
@@ -257,3 +258,19 @@ export default {
     top: calc(50% - 160px);
 }
 </style>
+
+<style>
+#cell-r1-c2 {
+    flex: revert;
+    width: 700px;
+}
+#cell-skyline {
+    height: 135px;
+}
+#cell-pie {
+    flex: 3;
+}
+#cell-progress {
+    flex: 2;
+}
+</style>
diff --git a/src/vue/test/dummy/Zotero.ts b/src/vue/test/dummy/Zotero.ts
@@ -22,12 +22,15 @@ class Item {
     }
     async getBestAttachment() {
         const att = fetchSync(`Zotero.Items.get(${this.id}).getBestAttachment()`);
-        if (!att.key)
-            return null;
+        if (!att.key) return null;
         return new Item(fetchSync(`Zotero.Items.getIDFromLibraryAndKey(1, '${att.key}')`));
     }
 }
 
+class Collection {
+    constructor(public id: number) {}
+}
+
 export default class Zotero {
     Promise = BlueBird;
     Item = Item;
@@ -50,8 +53,14 @@ export default class Zotero {
             ];
         },
     };
+    Collections = {
+        getByLibrary(libraryID: number, recursive: boolean) {
+            return [];
+        },
+    };
     Libraries = {
         userLibraryID: 1,
+        userLibrary: { name: 'Test Library' },
     };
     Tags = {
         getID(tag: string) {
@@ -62,7 +71,7 @@ export default class Zotero {
         },
         async getAutomaticInLibrary(libraryID: number) {
             return fetchSync(`Zotero.Tags.getAutomaticInLibrary(${libraryID})`);
-        }
+        },
     };
     Prefs = {
         get(pref: string) {
@@ -77,16 +86,19 @@ export default class Zotero {
     };
     File = {
         pathToFile(path: string) {
-            return new Proxy({ path }, {
-                get(target, prop: string) {
-                    const p = target.path.replace(/\\/g, '\\\\');
-                    return fetchSync(`Zotero.File.pathToFile('${p}').${prop}`);
-                }
-            });
+            return new Proxy(
+                { path },
+                {
+                    get(target, prop: string) {
+                        const p = target.path.replace(/\\/g, '\\\\');
+                        return fetchSync(`Zotero.File.pathToFile('${p}').${prop}`);
+                    },
+                },
+            );
         },
         getResource(path: string) {
             return fetchSync(`Zotero.File.getResource('${path}')`);
-        }
+        },
     };
     greenfrog = {};
 }
diff --git a/src/vue/test/index.html b/src/vue/test/index.html
@@ -14,8 +14,8 @@
     import { createApp } from 'vue';
     import App from './main.vue';
     import 'tdesign-vue-next/es/style/index.css';
-    // import 'highcharts/css/highcharts.css';
-    // import '@highcharts/dashboards/css/dashboards.css';
+    import 'highcharts/css/highcharts.css';
+    import '@highcharts/dashboards/css/dashboards.css';
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     import HighchartsVue from 'highcharts-vue';
     try {

diff --git a/src/vue/test/main.vue b/src/vue/test/main.vue
@@ -5,8 +5,9 @@
 </template>
 
 <script lang="ts">
-import ComponentToTest from '../dashboard/main.vue';
+// import ComponentToTest from '../dashboard/main.vue';
 // import ComponentToTest from '../summary/components/dualSelect.vue';
+import ComponentToTest from '../overview/main.vue';
 import { DarkUnicaTheme } from '../utility/themes';
 import fetchSync from './dummy/fetch';
 
@@ -26,7 +27,7 @@ export default {
     async mounted() {
         await this.$nextTick();
         // postMessage([...this.selectedItems]);
-        postMessage({ id: fetchSync('ZoteroPane.getSelectedItems(true)[0]') });
+        // postMessage({ id: fetchSync('ZoteroPane.getSelectedItems(true)[0]') });
     },
 };
 </script>
diff --git a/src/vue/utility/highcharts.ts b/src/vue/utility/highcharts.ts
@@ -1,4 +1,4 @@
-import * as Highcharts from 'highcharts';
+import Highcharts from 'highcharts';
 import HighchartsMore from 'highcharts/highcharts-more';
 HighchartsMore(Highcharts);
 import HighchartsGantt from 'highcharts/modules/gantt';
@@ -29,10 +29,15 @@ import HighchartsDrilldown from 'highcharts/modules/drilldown';
 HighchartsDrilldown(Highcharts);
 // import MouseWheelZoom from 'highcharts/modules/mouse-wheel-zoom';
 // MouseWheelZoom(Highcharts);
-import HighchartsPlugin from '@highcharts/dashboards/es-modules/Dashboards/Plugins/HighchartsPlugin';
-HighchartsPlugin.custom.connectHighcharts(Highcharts);
-import Dashboards from '@highcharts/dashboards/es-modules/masters/dashboards.src';
-Dashboards.PluginHandler.addPlugin(HighchartsPlugin);
+
+import Dashboards from '@highcharts/dashboards';
+import DataGrid from '@highcharts/dashboards/datagrid';
+import LayoutModule from '@highcharts/dashboards/modules/layout';
+LayoutModule(Dashboards);
+Dashboards.HighchartsPlugin.custom.connectHighcharts(Highcharts);
+Dashboards.DataGridPlugin.custom.connectDataGrid(DataGrid);
+Dashboards.PluginHandler.addPlugin(Dashboards.HighchartsPlugin);
+Dashboards.PluginHandler.addPlugin(Dashboards.DataGridPlugin);
 
 import { copySVG2JPG, saveSVG } from '../../bootstrap/modules/utils';
 import { viewItemsInLib } from './utils';
@@ -57,10 +62,8 @@ Highcharts.setOptions({
             duration: 1200,
             easing: (pos: number) => {
                 if (pos < 1 / 2.75) return 7.5625 * pos * pos;
-                if (pos < 2 / 2.75)
-                    return 7.5625 * (pos -= 1.5 / 2.75) * pos + 0.75;
-                if (pos < 2.5 / 2.75)
-                    return 7.5625 * (pos -= 2.25 / 2.75) * pos + 0.9375;
+                if (pos < 2 / 2.75) return 7.5625 * (pos -= 1.5 / 2.75) * pos + 0.75;
+                if (pos < 2.5 / 2.75) return 7.5625 * (pos -= 2.25 / 2.75) * pos + 0.9375;
                 return 7.5625 * (pos -= 2.625 / 2.75) * pos + 0.984375;
             },
         },
@@ -118,13 +121,7 @@ Highcharts.setOptions({
         },
         buttons: {
             contextButton: {
-                menuItems: [
-                    'viewFullscreen',
-                    'downloadSVG',
-                    'downloadJPEG',
-                    'showInLibrary',
-                    'help',
-                ],
+                menuItems: ['viewFullscreen', 'downloadSVG', 'downloadJPEG', 'showInLibrary', 'help'],
             },
         },
     },