Skip to content
This repository was archived by the owner on Aug 7, 2025. It is now read-only.

Commit 6f739f7

Browse files
amc1999amc1999
committed
charts, initial version
1 parent 18f54c7 commit 6f739f7

File tree

13 files changed

+626
-26
lines changed

13 files changed

+626
-26
lines changed

‎.vscode/launch.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:8080",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎licenses/LICENSE.apexcharts.txt

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2018 ApexCharts
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"dependencies": {
2121
"@fontsource/roboto-mono": "^5.0.20",
2222
"@quasar/extras": "^1.0.0",
23+
"apexcharts": "^4.5.0",
2324
"axios": "^1.2.1",
2425
"highlight.js": "^11.10.0",
2526
"marked-highlight": "^2.1.4",
@@ -30,7 +31,8 @@
3031
"vue": "^3.0.0",
3132
"vue-draggable-next": "^2.2.1",
3233
"vue-i18n": "^9.0.0",
33-
"vue-router": "^4.0.0"
34+
"vue-router": "^4.0.0",
35+
"vue3-apexcharts": "^1.8.0"
3436
},
3537
"devDependencies": {
3638
"@babel/eslint-parser": "^7.13.14",

‎quasar.config.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ module.exports = configure(function (ctx) {
2727
// https://v2.quasar.dev/quasar-cli-webpack/boot-files
2828
boot: [
2929
'i18n',
30-
'axios'
30+
'axios',
31+
'apexcharts'
3132
],
3233

3334
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
@@ -39,13 +40,10 @@ module.exports = configure(function (ctx) {
3940
extras: [
4041
// 'ionicons-v4',
4142
// 'mdi-v5',
42-
// 'fontawesome-v6',
4343
// 'eva-icons',
4444
// 'themify',
45-
// 'line-awesome',
4645
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
4746
'mdi-v7',
48-
'fontawesome-v6', // for easyMDE only
4947

5048
'roboto-font', // optional, you are not bound to it
5149
'material-icons' // optional, you are not bound to it

‎src/boot/apexcharts.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { boot } from 'quasar/wrappers'
2+
import VueApexCharts from 'vue3-apexcharts'
3+
import en from 'apexcharts/dist/locales/en.json'
4+
import fr from 'apexcharts/dist/locales/fr.json'
5+
6+
export default boot(({ app }) => {
7+
// The app.use(VueApexCharts) will make <apexchart> component available everywhere
8+
app.use(VueApexCharts)
9+
app.config.globalProperties.chartLocales = [en, fr]
10+
})

‎src/components/ParameterInfoDialog.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<td class="om-p-head-left">{{ $t('Size') }}</td>
2626
<td class="om-p-cell-left mono">{{ paramSize.dimSize }}</td>
2727
</tr>
28-
<tr v-if="paramSize.rank <= 1">
28+
<tr v-if="paramSize.rank < 1">
2929
<td class="om-p-head-left">{{ $t('Rank') }}</td>
3030
<td class="om-p-cell-left mono">{{ paramSize.rank }}</td>
3131
</tr>

‎src/components/TableInfoDialog.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<td class="om-p-head-left">{{ $t('Size') }}</td>
2323
<td class="om-p-cell-left mono">{{ tableSize.dimSize }}</td>
2424
</tr>
25-
<tr v-if="tableSize.rank <= 1">
25+
<tr v-if="tableSize.rank < 1">
2626
<td class="om-p-head-left">{{ $t('Rank') }}</td>
2727
<td class="om-p-cell-left mono">{{ tableSize.rank }}</td>
2828
</tr>

‎src/components/pivot-cvt-dimension.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const dimField = (field, readDim, isOnRow = false, isOnCol = false) => {
2424
isCol: isOnCol, // if true then this is column dimension field
2525
name: field.name, // dimension field name
2626
//
27-
read: readDim, // read field item function to return dimension item from source record
27+
read: readDim, // read field item is a function to return dimension item from source record
2828
filter: (v) => selectedIdsIndex.hasOwnProperty(v), // return true if field item is selected by dimension filters
2929
//
3030
keyPos: 0, // position of field item in body cell key

‎src/i18n/fr/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default {
4545
'Cancel upload': 'Annuler le chargement',
4646
'canceled': 'annulé',
4747
'characters': 'caractères',
48+
'Chart': 'Graphique',
4849
'Cleanup': 'Nettoyer',
4950
'Cleanup downloads or uploads of all models': 'Nettoyage des téléchargements ou des chargements de tous les modèles',
5051
'Cleanup log: ': 'Journal de nettoyage : ',
@@ -67,6 +68,7 @@ export default {
6768
'Collapse all': 'Réduire Tout',
6869
'column': 'colonne',
6970
'column: ': 'colonne : ',
71+
'Column chart': 'Graphique à colonnes',
7072
'Column dimensions': 'Dimensions de la colonne',
7173
'Compare this model run with': 'Comparez ce modèle exécuté avec',
7274
'Comparison': 'Comparaison',
@@ -261,6 +263,8 @@ export default {
261263
'Group deleted: ': 'Groupe supprimé : ',
262264
'Group has no parameters: ': "Le groupe n'a pas de paramètres : ",
263265
'Heat map': 'Carte thermique',
266+
'Hide chart': 'Masquer le graphique',
267+
'Hide chart values': 'Masquer les valeurs du graphique',
264268
'Hide pagination controls': 'Masquer les contrôles de pagination',
265269
'Hide pivot controls': 'Masquer les contrôles de pivot',
266270
'Hide rows and columns bars': 'Masquer les barres de lignes et de colonnes',
@@ -327,6 +331,7 @@ export default {
327331
'keys': 'clés',
328332
'label': 'étiquette',
329333
'Last Activity Time': 'Heure de la dernière activité',
334+
'Line chart': 'Graphique linéaire',
330335
'List of input scenarios': "Liste des scénarios d'entrée",
331336
'List of model runs': 'Liste des exécutions de modèles',
332337
'Loading...': 'Chargement...',
@@ -419,6 +424,8 @@ export default {
419424
'New Input Scenario': "Nouveau scénario d'entrée",
420425
'New Scenario': 'Nouveau scénario',
421426
'No': 'Non',
427+
'No chart data': 'Aucune donnée graphique',
428+
'No data': 'Aucune donnée',
422429
'No entity attributes found': "Aucun attribut d'entité trouvé",
423430
'No entity microdata included into model run results': "Aucune microdonnée d'entité incluse dans les résultats d'exécution du modèle",
424431
'No files found': 'Aucun des dossiers trouvé',
@@ -519,6 +526,7 @@ export default {
519526
'Retain group of output tables: ': 'Conserver le groupe de tableaux de résultat : ',
520527
'Retain output table: ': 'Conserver la tableau de résultat : ',
521528
'Required': 'Obligatoire',
529+
'Row chart': 'Graphique à lignes',
522530
'Row dimensions': 'Dimensions des lignes',
523531
'rows': 'lignes',
524532
'Run': 'Exécuter',
@@ -598,6 +606,8 @@ export default {
598606
'Show all microdata entities': 'Afficher toutes les entités de microdonnées',
599607
'Show all output tables': 'Afficher toutes les tableaux de résultats',
600608
'Show all parameters': 'Afficher tous les paramètres',
609+
'Show chart': 'Afficher le graphique',
610+
'Show chart values': 'Afficher les valeurs du graphique',
601611
'Show filtered out items': 'Afficher les éléments filtrés',
602612
'Show formatted value': 'Afficher la valeur formatée',
603613
'Show labels': 'Afficher les libellés',

‎src/pages/TablePage.vue

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,62 @@
186186
</q-item>
187187
<!-- end of calculated scale menu -->
188188

189+
<q-item
190+
@click="onChartToggle()"
191+
:disable="isScalar"
192+
clickable
193+
v-close-popup
194+
>
195+
<q-item-section avatar>
196+
<q-icon color="primary" name="mdi-chart-bar" />
197+
</q-item-section>
198+
<q-item-section>{{ isShowChart ? $t('Hide chart') : $t('Show chart') }}</q-item-section>
199+
</q-item>
200+
<q-item
201+
:disable="isScalar"
202+
@click="showChart('col')"
203+
:class="{ 'text-primary' : (isShowChart && chartType === 'col') }"
204+
:clickable="!isShowChart && chartType !== 'col'"
205+
v-close-popup
206+
>
207+
<q-item-section avatar><q-icon name="bar_chart" /></q-item-section>
208+
<q-item-section>{{ $t('Column chart') }}</q-item-section>
209+
</q-item>
210+
<q-item
211+
:disable="isScalar"
212+
@click="showChart('row')"
213+
:class="{ 'text-primary' : (isShowChart && chartType === 'row') }"
214+
:clickable="!isShowChart && chartType !== 'row'"
215+
v-close-popup
216+
>
217+
<q-item-section avatar><q-icon name="sort" /></q-item-section>
218+
<q-item-section>{{ $t('Row chart') }}</q-item-section>
219+
</q-item>
220+
<q-item
221+
:disable="isScalar"
222+
@click="showChart('line')"
223+
:class="{ 'text-primary' : (isShowChart && chartType === 'line') }"
224+
:clickable="!isShowChart && chartType !== 'line'"
225+
v-close-popup
226+
>
227+
<q-item-section avatar><q-icon name="mdi-chart-line" /></q-item-section>
228+
<q-item-section>{{ $t('Line chart') }}</q-item-section>
229+
</q-item>
230+
<q-item
231+
:disable="isScalar || !isShowChart"
232+
@click="onChartLabelToggle()"
233+
clickable
234+
>
235+
<template v-if="isChartLabels">
236+
<q-item-section avatar><q-icon name="mdi-numeric-off" /></q-item-section>
237+
<q-item-section class="text-primary">{{ $t('Hide chart values') }}</q-item-section>
238+
</template>
239+
<template v-else>
240+
<q-item-section avatar><q-icon name="mdi-numeric" /></q-item-section>
241+
<q-item-section>{{ $t('Show chart values') }}</q-item-section>
242+
</template>
243+
</q-item>
244+
189245
<q-separator />
190246

191247
<q-item
@@ -506,7 +562,7 @@
506562
unelevated
507563
dense
508564
color="primary"
509-
class="col-auto rounded-borders"
565+
class="col-auto rounded-borders q-mr-xs"
510566
icon="mdi-sun-thermometer"
511567
:title="$t('Heat map')"
512568
:aria-label="$t('Heat map')"
@@ -559,6 +615,81 @@
559615
</q-btn>
560616
<!-- end of calculated scale menu -->
561617

618+
<!-- chart menu -->
619+
<q-btn
620+
:disable="isScalar"
621+
unelevated
622+
dense
623+
color="primary"
624+
class="col-auto rounded-borders"
625+
icon="mdi-chart-bar"
626+
:title="$t('Chart')"
627+
:aria-label="$t('Chart')"
628+
>
629+
<q-menu>
630+
631+
<div class=" q-px-sm q-mt-sm q-mb-none">
632+
<q-btn
633+
:disable="isScalar"
634+
@click="onChartToggle()"
635+
v-close-popup
636+
unelevated
637+
:label="isShowChart ? $t('Hide chart') : $t('Show chart')"
638+
no-caps
639+
color="primary"
640+
class="rounded-borders full-width"
641+
/>
642+
</div>
643+
<q-list dense>
644+
<q-item
645+
:disable="isScalar"
646+
@click="showChart('col')"
647+
:class="{ 'text-primary' : (isShowChart && chartType === 'col') }"
648+
:clickable="!isShowChart || chartType !== 'col'"
649+
v-close-popup
650+
>
651+
<q-item-section avatar><q-icon name="bar_chart" /></q-item-section>
652+
<q-item-section>{{ $t('Column chart') }}</q-item-section>
653+
</q-item>
654+
<q-item
655+
:disable="isScalar"
656+
@click="showChart('row')"
657+
:class="{ 'text-primary' : (isShowChart && chartType === 'row') }"
658+
:clickable="!isShowChart || chartType !== 'row'"
659+
v-close-popup
660+
>
661+
<q-item-section avatar><q-icon name="sort" /></q-item-section>
662+
<q-item-section>{{ $t('Row chart') }}</q-item-section>
663+
</q-item>
664+
<q-item
665+
:disable="isScalar"
666+
@click="showChart('line')"
667+
:class="{ 'text-primary' : (isShowChart && chartType === 'line') }"
668+
:clickable="!isShowChart || chartType !== 'line'"
669+
v-close-popup
670+
>
671+
<q-item-section avatar><q-icon name="mdi-chart-line" /></q-item-section>
672+
<q-item-section>{{ $t('Line chart') }}</q-item-section>
673+
</q-item>
674+
<q-item
675+
:disable="isScalar || !isShowChart"
676+
@click="onChartLabelToggle()"
677+
clickable
678+
>
679+
<template v-if="isChartLabels">
680+
<q-item-section avatar><q-icon name="mdi-numeric-off" /></q-item-section>
681+
<q-item-section class="text-primary">{{ $t('Hide chart values') }}</q-item-section>
682+
</template>
683+
<template v-else>
684+
<q-item-section avatar><q-icon name="mdi-numeric" /></q-item-section>
685+
<q-item-section>{{ $t('Show chart values') }}</q-item-section>
686+
</template>
687+
</q-item>
688+
</q-list>
689+
</q-menu>
690+
</q-btn>
691+
<!-- end of chart menu -->
692+
562693
<q-separator vertical inset spaced="sm" color="secondary" />
563694

564695
<q-btn
@@ -702,6 +833,31 @@
702833
</div>
703834
<!-- end of output table header -->
704835

836+
<q-card
837+
v-if="isShowChart && chartType === 'col'"
838+
class="q-mx-sm q-mb-sm"
839+
>
840+
<apexchart width="50%" :options="chartOpts" :series="chartSeries"></apexchart>
841+
</q-card>
842+
<q-card
843+
v-if="isShowChart && chartType === 'row'"
844+
class="q-mx-sm q-mb-sm"
845+
>
846+
<apexchart width="50%" :options="chartOpts" :series="chartSeries"></apexchart>
847+
</q-card>
848+
<q-card
849+
v-if="isShowChart && chartType === 'line'"
850+
class="q-mx-sm q-mb-sm"
851+
>
852+
<apexchart width="50%" :options="chartOpts" :series="chartSeries"></apexchart>
853+
</q-card>
854+
<q-card
855+
v-if="isShowChart && (chartType !== 'row' && chartType !== 'col' && chartType !== 'line')"
856+
class="q-ma-lg q-pa-lg"
857+
>
858+
{{ $t('No chart data') }}
859+
</q-card>
860+
705861
<!-- pivot table controls and view -->
706862
<div class="q-mx-sm">
707863

0 commit comments

Comments
 (0)