mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-28 23:18:10 +08:00
Add echarts library to design page [SCI-12399]
This commit is contained in:
Anton
parent
67296aa6b9
commit
d705f29347
6 changed files with 193 additions and 0 deletions
154
app/javascript/packs/vue/design_system/charts.js
Normal file
154
app/javascript/packs/vue/design_system/charts.js
Normal file
|
|
@ -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');
|
||||
9
app/views/design_elements/_charts.html.erb
Normal file
9
app/views/design_elements/_charts.html.erb
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<div>
|
||||
<h1>Charts</h1>
|
||||
<div id="charts" class="h-[500px] grid grid-cols-2 gap-4">
|
||||
<v-chart class="chart-pie" :option="pieOptions" autoresize></v-chart>
|
||||
<v-chart class="chart-bar" :option="barOptions" autoresize></v-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= javascript_include_tag 'vue_design_system_charts' %>
|
||||
|
|
@ -10,6 +10,8 @@
|
|||
end
|
||||
%>
|
||||
|
||||
<%= render partial: 'charts' %>
|
||||
|
||||
<%= render partial: 'table' %>
|
||||
|
||||
<%= render partial: 'radio' %>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
25
yarn.lock
25
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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue