Skip to content

Commit

Permalink
feat(detail): update Antv home update dumi-theme-antv 1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
ai-qing-hai committed Nov 15, 2023
1 parent 6517e9e commit 430fe41
Show file tree
Hide file tree
Showing 7 changed files with 33 additions and 5 deletions.
3 changes: 2 additions & 1 deletion .dumi/theme/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -327,5 +327,6 @@
"单色顺序色板,均基于分类色板生长而来,一般使用同一色相,通过明度或饱和度的渐变,常用来表示同一事物中的数值大小或梯度变化,如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "Monochromatic sequential color palette, all based on the growth of classification swatches, generally use the same hue, through the gradual change of brightness or saturation, commonly used to represent the numerical size or gradient change in the same thing, such as ranking changes, comparison of the number of new people in a country or region, risk level changes, etc.",
"邻近顺序色板,均基于分类色板生长而来,为加大辨识度也可使用邻近色相,通过明度或饱和度的渐变,常用来表示同一事物中的数值大小或梯度变化,如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "Adjacent sequential color palette, all based on the growth of the classification color palette, in order to increase the recognition can also use adjacent colors, through the gradual change of brightness or saturation, commonly used to represent the value size or gradient change in the same thing, such as ranking change, comparison of the number of new population in a country or region, risk level change.",
"点再到正向值的连续变化区间,显示相对立的两个值的大小关系,常用于气温的冷热、海拔高低、股票涨跌等。": "The continuous change interval from the point to the positive value shows the size relationship between the two opposite values, which is often used for the cold and hot temperature, altitude, stock rise and fall, etc.",
"蚂蚁企业级数据可视化解决方案,让用户轻松看数收获工作意义": "Ant enterprise data visualization solution, so that users can easily see the number of harvest work significance"
"蚂蚁企业级数据可视化解决方案,让用户轻松看数收获工作意义": "Ant enterprise data visualization solution, so that users can easily see the number of harvest work significance.",
"柱形图、饼图、关系图、地图、多维表格等260+丰富图表随心选用": "Column、Pie、Graph、Map、Dimensions Table and other 260+ rich chart choice at will."
}
3 changes: 2 additions & 1 deletion .dumi/theme/locales/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -319,5 +319,6 @@
"单色顺序色板,均基于分类色板生长而来,一般使用同一色相,通过明度或饱和度的渐变,常用来表示同一事物中的数值大小或梯度变化,如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "单色顺序色板,均基于分类色板生长而来,一般使用同一色相,通过明度或饱和度的渐变,常用来表示同一事物中的数值大小或梯度变化,如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。",
"邻近顺序色板,均基于分类色板生长而来,为加大辨识度也可使用邻近色相,通过明度或饱和度的渐变,常用来表示同一事物中的数值大小或梯度变化,如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "邻近顺序色板,均基于分类色板生长而来,为加大辨识度也可使用邻近色相,通过明度或饱和度的渐变,常用来表示同一事物中的数值大小或梯度变化,如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。",
"点再到正向值的连续变化区间,显示相对立的两个值的大小关系,常用于气温的冷热、海拔高低、股票涨跌等。": "点再到正向值的连续变化区间,显示相对立的两个值的大小关系,常用于气温的冷热、海拔高低、股票涨跌等。",
"蚂蚁企业级数据可视化解决方案,让用户轻松看数收获工作意义": "蚂蚁企业级数据可视化解决方案,让用户轻松看数收获工作意义"
"蚂蚁企业级数据可视化解决方案,让用户轻松看数收获工作意义": "蚂蚁企业级数据可视化解决方案,让用户轻松看数收获工作意义",
"柱形图、饼图、关系图、地图、多维表格等260+丰富图表随心选用": "柱形图、饼图、关系图、地图、多维表格等260+丰富图表随心选用"
}
2 changes: 1 addition & 1 deletion site/components/LinkCharts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function LinkCharts() {

return (
<div className={styles.linkCharts}>
<Title title={useT('丰富图表,选用自如')} subTitle={useT('经历了海量数据场景下的严苛考验,蚂蚁集团自研了数据库、云原生、隐私计算、图计算为代表的数字化“根技术”')} />
<Title title={useT('丰富图表,选用自如')} subTitle={useT('柱形图、饼图、关系图、地图、多维表格等260+丰富图表随心选用')} />
<div className={styles.charts}>
<div
className={classNames(styles.box, {
Expand Down
4 changes: 4 additions & 0 deletions site/components/ThemeCharts/Charts/Gauge/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,14 @@ export function GaugeChart(props: GaugeProps) {
if (!plotRef.current) {
plotRef.current = new Gauge(containerRef.current, {
percent: 0,
appendPadding: [0, 0, 10, 0],
startAngle: -Math.PI,
endAngle: 0,
indicator: false,
animation: {},
gaugeStyle: {
lineCap: 'round',
},
...themeConfig,
});

Expand Down
20 changes: 18 additions & 2 deletions site/components/ThemeCharts/Charts/Graph/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,30 @@ export function GraphChart(props: GraphProps) {

const create = useCallback((container: HTMLDivElement | null) => {
if (!container) return;
const width = container.clientWidth;
const height = container.clientHeight;

// 限制范围
const onTick = () => {
data.nodes.forEach((node) => {
// @ts-ignore
node.x = Math.min(Math.max(30, node.x), width - 60);
// @ts-ignore
node.y = Math.min(Math.max(20, node.y), height - 40);
});
};

plotRef.current = new Graph({
container,
width: container.clientWidth,
height: container.clientHeight,
width,
height,
defaultNode,
layout: {
type: 'force',
linkDistance: 120,
edgeStrength: 1,
nodeStrength: -10,
onTick,
},
});

Expand Down
3 changes: 3 additions & 0 deletions site/components/ThemeCharts/Charts/Pie/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ export function PieChart(props: PieProps) {
...(isDark ? DARK_THEME_CONFIG : LIGHT_THEME_CONFIG)['legend'],
position: 'bottom',
},
pieStyle:{
lineWidth: 0,
},
statistic: {
title: {
offsetY: -10,
Expand Down
3 changes: 3 additions & 0 deletions site/components/ThemeCharts/Charts/StackedColumn/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,9 @@ export function StackedColumnChart(props: StackedColumnProps) {
xField: 'x',
yField: 'y',
seriesField: 'type',
columnStyle: {
radius: [2, 2, 0, 0],
},
...themeConfig,
});

Expand Down

0 comments on commit 430fe41

Please sign in to comment.