Skip to content

Commit

Permalink
refactor: dual axes plot
Browse files Browse the repository at this point in the history
  • Loading branch information
@lvisei
lvisei committed Nov 14, 2024
1 parent 6ea8f6e commit a7c3b39
Show file tree
Hide file tree
Showing 6 changed files with 218 additions and 343 deletions.
132 changes: 56 additions & 76 deletions src/DualAxes/demos/common.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,62 @@
import type { DualAxesProps } from '@antv/gpt-vis';
import { DualAxes } from '@antv/gpt-vis';
import React from 'react';

const children = [
{
type: 'column',
data: [
{ category: '2020-08-20', consumeTime: 10868 },
{ category: '2020-08-21', consumeTime: 8786 },
{ category: '2020-08-22', consumeTime: 10824 },
{ category: '2020-08-23', consumeTime: 7860 },
{ category: '2020-08-24', consumeTime: 13253 },
{ category: '2020-08-25', consumeTime: 17015 },
{ category: '2020-08-26', consumeTime: 19298 },
{ category: '2020-08-27', consumeTime: 13937 },
{ category: '2020-08-28', consumeTime: 11541 },
{ category: '2020-08-29', consumeTime: 15244 },
{ category: '2020-08-30', consumeTime: 14247 },
{ category: '2020-08-31', consumeTime: 9402 },
{ category: '2020-09-01', consumeTime: 10440 },
{ category: '2020-09-02', consumeTime: 9345 },
{ category: '2020-09-03', consumeTime: 18459 },
{ category: '2020-09-04', consumeTime: 9763 },
{ category: '2020-09-05', consumeTime: 11074 },
{ category: '2020-09-06', consumeTime: 11770 },
{ category: '2020-09-07', consumeTime: 12206 },
{ category: '2020-09-08', consumeTime: 11434 },
{ category: '2020-09-09', consumeTime: 16218 },
{ category: '2020-09-10', consumeTime: 11914 },
{ category: '2020-09-11', consumeTime: 16781 },
{ category: '2020-09-12', consumeTime: 10555 },
{ category: '2020-09-13', consumeTime: 10899 },
{ category: '2020-09-14', consumeTime: 10713 },
{ category: '2020-09-15', consumeTime: 0 },
{ category: '2020-09-16', consumeTime: 0 },
{ category: '2020-09-17', consumeTime: 20357 },
{ category: '2020-09-18', consumeTime: 10424 },
],
yField: 'consumeTime',
style: { maxWidth: 80 },
},
{
type: 'line',
data: [
{ time: '2020-08-20', completeTime: 649.483 },
{ time: '2020-08-21', completeTime: 1053.7 },
{ time: '2020-08-22', completeTime: 679.817 },
{ time: '2020-08-23', completeTime: 638.117 },
{ time: '2020-08-24', completeTime: 843.3 },
{ time: '2020-08-25', completeTime: 1092.983 },
{ time: '2020-08-26', completeTime: 1036.317 },
{ time: '2020-08-27', completeTime: 1031.9 },
{ time: '2020-08-28', completeTime: 803.467 },
{ time: '2020-08-29', completeTime: 830.733 },
{ time: '2020-08-30', completeTime: 709.867 },
{ time: '2020-08-31', completeTime: 665.233 },
{ time: '2020-09-01', completeTime: 696.367 },
{ time: '2020-09-02', completeTime: 692.867 },
{ time: '2020-09-03', completeTime: 936.017 },
{ time: '2020-09-04', completeTime: 782.867 },
{ time: '2020-09-05', completeTime: 653.8 },
{ time: '2020-09-06', completeTime: 856.683 },
{ time: '2020-09-07', completeTime: 777.15 },
{ time: '2020-09-08', completeTime: 773.283 },
{ time: '2020-09-09', completeTime: 833.3 },
{ time: '2020-09-10', completeTime: 793.517 },
{ time: '2020-09-11', completeTime: 894.45 },
{ time: '2020-09-12', completeTime: 725.55 },
{ time: '2020-09-13', completeTime: 709.967 },
{ time: '2020-09-14', completeTime: 787.6 },
{ time: '2020-09-15', completeTime: 644.183 },
{ time: '2020-09-16', completeTime: 1066.65 },
{ time: '2020-09-17', completeTime: 932.45 },
{ time: '2020-09-18', completeTime: 753.583 },
],
yField: 'completeTime',
},
];
const config: DualAxesProps = {
categories: [
'2020-08-20',
'2020-08-21',
'2020-08-22',
'2020-08-23',
'2020-08-24',
'2020-08-25',
'2020-08-26',
'2020-08-27',
'2020-08-28',
'2020-08-29',
'2020-08-30',
'2020-08-31',
'2020-09-01',
'2020-09-02',
'2020-09-03',
'2020-09-04',
'2020-09-05',
'2020-09-06',
'2020-09-07',
'2020-09-08',
'2020-09-09',
'2020-09-10',
'2020-09-11',
'2020-09-12',
'2020-09-13',
'2020-09-14',
'2020-09-15',
'2020-09-16',
'2020-09-17',
'2020-09-18',
],
series: [
{
type: 'column',
data: [
10868, 8786, 10824, 7860, 13253, 17015, 19298, 13937, 11541, 15244, 14247, 9402, 10440,
9345, 18459, 9763, 11074, 11770, 12206, 11434, 16218, 11914, 16781, 10555, 10899, 10713, 0,
0, 20357, 10424,
],
axisYTitle: '消耗时间',
},
{
type: 'line',
data: [
649.483, 1053.7, 679.817, 638.117, 843.3, 1092.983, 1036.317, 1031.9, 803.467, 830.733,
709.867, 665.233, 696.367, 692.867, 936.017, 782.867, 653.8, 856.683, 777.15, 773.283,
833.3, 793.517, 894.45, 725.55, 709.967, 787.6, 644.183, 1066.65, 932.45, 753.583,
],
axisYTitle: '完成时间',
},
],
};

export default () => {
return <DualAxes children={children} />;
return <DualAxes {...config} />;
};
17 changes: 6 additions & 11 deletions src/DualAxes/demos/markdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,17 @@ const markdownContent = `
\`\`\`vis-chart
{
"type": "dual-axes",
"children": [
"categories": ["2020", "2021", "2022"],
"series": [
{
"type": "column",
"data": [
{ "category": "2020", "value": 500 },
{ "category": "2021", "value": 600 },
{ "category": "2022", "value": 700 }
]
"data": [500, 600, 700],
"axisYTitle": "amount"
},
{
"type": "line",
"data": [
{ "time": "2020", "value": 10 },
{ "time": "2021", "value": 12 },
{ "time": "2022", "value": 15 }
]
"data": [10, 12, 15],
"axisYTitle": "rate"
}
]
}
Expand Down
Loading

0 comments on commit a7c3b39

Please sign in to comment.