diff --git a/app/javascript/packs/vue/design_system/charts.js b/app/javascript/packs/vue/design_system/charts.js new file mode 100644 index 000000000..db936c744 --- /dev/null +++ b/app/javascript/packs/vue/design_system/charts.js @@ -0,0 +1,154 @@ +import { createApp } from 'vue/dist/vue.esm-bundler.js'; +import { mountWithTurbolinks } from '../helpers/turbolinks.js'; +import { use } from 'echarts/core'; +import { CanvasRenderer } from 'echarts/renderers'; +import { PieChart, BarChart } from 'echarts/charts'; + +import VChart from 'vue-echarts'; +import { + TitleComponent, + TooltipComponent, + LegendComponent, + GridComponent, + DatasetComponent +} from 'echarts/components'; + +use([ + CanvasRenderer, + PieChart, + TitleComponent, + TooltipComponent, + LegendComponent, + BarChart, + GridComponent, + DatasetComponent +]); + + +const app = createApp({ + data() { + return { + pieOptions: { + tooltip: { + trigger: 'item', + formatter: '{d}%', + }, + series: [ + { + name: 'Traffic Sources', + type: 'pie', + color: [ + '#6F2DC1', + '#E9A845', + '#5EC66F', + '#3B99FD', + '#BCC3CF', + ], + label: { + show: false, + position: 'center' + }, + labelLine: { + show: false + }, + radius: ['40%', '70%'], + itemStyle: { + borderRadius: 10, + borderColor: '#fff', + borderWidth: 2 + }, + data: [ + { value: 4, name: 'Done' }, + { value: 3, name: 'In review' }, + { value: 5, name: 'Completed' }, + { value: 5, name: 'In progress' }, + { value: 1, name: 'Not started' }, + ], + }, + ], + }, + barOptions: { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: [ + { + type: 'category', + axisLabel: { + hideOverlap: false, + interval: 0, + overflow: 'truncate', + width: 80, + }, + data: ['Bor K', 'Huan Pernados Dias Muran', 'Alex Smith', 'Pablito con Huan', 'Donnie Brasko', 'Pablo K', 'Ava White'] + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'Not started', + type: 'bar', + stack: 'status', + barWidth: '20', + color: '#BCC3CF', + + emphasis: { + focus: 'series' + }, + data: [2, 4, 6, 4, 3, 1, 2] + }, + { + name: 'In progress', + type: 'bar', + color: '#3B99FD', + stack: 'status', + emphasis: { + focus: 'series' + }, + data: [10, 12, 21, 4, 2, 3, 4] + }, + { + name: 'Completed', + type: 'bar', + color: '#5EC66F', + stack: 'status', + emphasis: { + focus: 'series' + }, + data: [0, 3, 1, 2, 2, 3, 1] + }, + { + name: 'In review', + type: 'bar', + color: '#E9A845', + stack: 'status', + data: [2, 4, 3, 4, 5, 1, 2], + emphasis: { + focus: 'series' + }, + }, + { + name: 'Done', + type: 'bar', + color: '#6F2DC1', + stack: 'status', + emphasis: { + focus: 'series' + }, + data: [7, 5, 3, 6, 7, 8, 4] + } + ] + } + }; + }, +}); +app.component('VChart', VChart); +app.config.globalProperties.i18n = window.I18n; +mountWithTurbolinks(app, '#charts'); diff --git a/app/views/design_elements/_charts.html.erb b/app/views/design_elements/_charts.html.erb new file mode 100644 index 000000000..7cf103625 --- /dev/null +++ b/app/views/design_elements/_charts.html.erb @@ -0,0 +1,9 @@ +
+

Charts

+
+ + +
+
+ +<%= javascript_include_tag 'vue_design_system_charts' %> diff --git a/app/views/design_elements/index.html.erb b/app/views/design_elements/index.html.erb index 7e4466d93..b065463dd 100644 --- a/app/views/design_elements/index.html.erb +++ b/app/views/design_elements/index.html.erb @@ -10,6 +10,8 @@ end %> +<%= render partial: 'charts' %> + <%= render partial: 'table' %> <%= render partial: 'radio' %> diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js index d3fd43ece..1f97f7c27 100644 --- a/config/webpack/webpack.config.js +++ b/config/webpack/webpack.config.js @@ -75,6 +75,7 @@ const entryList = { vue_my_module_assigned_items: './app/javascript/packs/vue/my_module_assigned_items.js', vue_design_system_inputs: './app/javascript/packs/vue/design_system/inputs.js', vue_design_system_table: './app/javascript/packs/vue/design_system/table.js', + vue_design_system_charts: './app/javascript/packs/vue/design_system/charts.js', vue_favorites_widget: './app/javascript/packs/vue/favorites_widget.js', vue_experiment_description_modal: './app/javascript/packs/vue/experiment_description_modal.js', vue_user_groups_table: './app/javascript/packs/vue/user_groups_table.js', diff --git a/package.json b/package.json index c6f040df5..8a40aa2bd 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "croppie": "^2.6.5", "css-loader": "^7.1.2", "decimal.js": "^10.5.0", + "echarts": "^6.0.0", "file-loader": "^6.2.0", "hammerjs": "^2.0.8", "inputmask": "^5.0.9", @@ -77,6 +78,7 @@ "tui-image-editor": "github:scinote-eln/tui.image-editor#3_15_2_updated", "twemoji": "^14.0.2", "vue": "^3.5.16", + "vue-echarts": "^8.0.0", "vue-loader": "^17.4.2", "vue3-draggable-resizable": "^1.6.5", "vue3-perfect-scrollbar": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index 98403542e..7ca4bf956 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2268,6 +2268,14 @@ dunder-proto@^1.0.1: es-errors "^1.3.0" gopd "^1.2.0" +echarts@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/echarts/-/echarts-6.0.0.tgz#2935aa7751c282d1abbbf7d719d397199a15b9e7" + integrity sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ== + dependencies: + tslib "2.3.0" + zrender "6.0.0" + electron-to-chromium@^1.5.160: version "1.5.165" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.165.tgz#477b0957e42f071905a86f7c905a9848f95d2bdb" @@ -4545,6 +4553,11 @@ tr46@~0.0.3: resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== +tslib@2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e" + integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg== + tslib@^2.0.0, tslib@^2.0.1, tslib@^2.3.0: version "2.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" @@ -4713,6 +4726,11 @@ vm-browserify@^1.1.2: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +vue-echarts@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-8.0.0.tgz#97927f99c30178b6d1656dfc19eca70d2e7d319e" + integrity sha512-tf8KadYTOBukRVJBYChdust4UYTa85lh/d41EmQt3FwP+p65s+Pn9s23/9HKjWnRuTZa6FxL/JgGNFsHBfV5Eg== + vue-loader@^17.4.2: version "17.4.2" resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.4.2.tgz#f87f0d8adfcbbe8623de9eba1979d41ba223c6da" @@ -5013,3 +5031,10 @@ zod@^3.24.1: version "3.25.75" resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.75.tgz#8ff9be2fbbcb381a9236f9f74a8879ca29dcc504" integrity sha512-OhpzAmVzabPOL6C3A3gpAifqr9MqihV/Msx3gor2b2kviCgcb+HM9SEOpMWwwNp9MRunWnhtAKUoo0AHhjyPPg== + +zrender@6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/zrender/-/zrender-6.0.0.tgz#947077bc69cdea744134984927f132f3727f8079" + integrity sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg== + dependencies: + tslib "2.3.0"