Skip to content

Commit 63bd4a0

Browse files
dolphin0618dolphin0618
committed
fix: chart style
1 parent 0c6a670 commit 63bd4a0

11 files changed

Lines changed: 117 additions & 71 deletions

File tree

‎src/frontend/platform/public/locales/en-US/dashboard.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@
358358
"charLimit200": "Character limit: 1-200 characters",
359359
"charLimit200b": "The name cannot exceed 200 characters ",
360360
"rename": "Rename",
361-
"duplicate": "Duplicate",
361+
"duplicate": "Copy",
362362
"copyTo": "Copy to",
363363
"noOtherDashboards": "No other dashboards available",
364364
"createFailed": "Failed to create, please try again",

‎src/frontend/platform/src/components/bs-comp/sheets/AppTempSheet.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function AppTempSheet({ children, onCustomCreate, onSelect }) {
5454
{children}
5555
</SheetTrigger>
5656
<SheetContent className="sm:min-w-[966px] ">
57-
<div className="flex h-full" onClick={e => e.stopPropagation()}>
57+
<div className="app-sheet flex h-full" onClick={e => e.stopPropagation()}>
5858
<div className="w-fit p-6">
5959
<SheetTitle>{t('appTemplate')}</SheetTitle>
6060
<SheetDescription>{t('chooseTemplateOrCreateBlank')}</SheetDescription>
@@ -65,7 +65,7 @@ export default function AppTempSheet({ children, onCustomCreate, onSelect }) {
6565
className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 mb-2 ${type === AppType.FLOW && 'bg-muted-foreground/10'}`}
6666
onClick={() => setType(AppType.FLOW)}
6767
>
68-
<FlowIcon />
68+
<FlowIcon/>
6969
<span>{t('workflow')}</span>
7070
</div>
7171
<div

‎src/frontend/platform/src/components/bs-icons/app/abilities.svg‎

Lines changed: 18 additions & 12 deletions
Loading

‎src/frontend/platform/src/components/bs-icons/app/flow.svg‎

Lines changed: 8 additions & 8 deletions
Loading

‎src/frontend/platform/src/components/bs-icons/app/helper.svg‎

Lines changed: 7 additions & 7 deletions
Loading

‎src/frontend/platform/src/pages/Dashboard/colorSchemes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -534,8 +534,8 @@ export const getDefaultMetricStyle = (title, subtitle) => ({
534534
"subtitleItalic": false,
535535
"subtitleUnderline": false,
536536
"metricFontSize": 28,
537-
"metricColor": "#0EA5E9",
538-
"metricAlign": "center",
537+
"metricColor": "#4882f6",
538+
"metricAlign": "end",
539539
"metricBold": true,
540540
"metricItalic": false,
541541
"metricUnderline": false,

‎src/frontend/platform/src/pages/Dashboard/components/charts/BaseChart.tsx‎

Lines changed: 65 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,14 @@ const getCartesianChartOption = (
215215
};
216216

217217
// Axis
218-
const axisLabelStyle = { ...getTextStyle({ fontSize: styleConfig.xAxisFontSize, color: styleConfig.xAxisColor }) };
218+
const xAxisTitleStyle = getTextStyle({
219+
fontSize: styleConfig.xAxisFontSize,
220+
color: styleConfig.xAxisColor
221+
});
222+
const yAxisTitleStyle = getTextStyle({
223+
fontSize: styleConfig.yAxisFontSize,
224+
color: styleConfig.yAxisColor
225+
});
219226

220227
// (Category Axis)
221228
const categoryAxis = {
@@ -228,24 +235,18 @@ const getCartesianChartOption = (
228235
formatter: function (value) {
229236
if (!value) return '';
230237
const lines = value.split('\n');
231-
232-
const processedLines = lines.map(line => {
233-
if (line.length > 10) {
234-
return line.slice(0, 10) + '...';
235-
}
236-
return line;
237-
});
238-
239-
return processedLines.join('\n');
238+
return lines.map(line => line.length > 10 ? line.slice(0, 10) + '...' : line).join('\n');
240239
},
241240
hideOverlap: true,
241+
color: '#666'
242242
// interval: 0,
243243
// hideOverlap: true,
244244
// overflow: 'break'
245245
// ...axisLabelStyle,
246246
},
247247
name: styleConfig.xAxisTitle || '',
248-
nameLocation: 'center'
248+
nameLocation: 'center',
249+
nameTextStyle: xAxisTitleStyle
249250
};
250251

251252
// (Value Axis)
@@ -254,22 +255,52 @@ const getCartesianChartOption = (
254255
show: styleConfig.showAxis ?? true,
255256
axisLabel: {
256257
formatter: (val: any) => unitConversion(val, dataConfig).join(''),
257-
...axisLabelStyle,
258+
color: '#666'
258259
},
259260
splitLine: { show: styleConfig.showGrid ?? true },
260261
name: styleConfig.yAxisTitle || '',
261262
nameLocation: 'center',
262-
nameRotate: isHorizontal ? 0 : 90
263+
nameRotate: isHorizontal ? 0 : 90,
264+
nameTextStyle: yAxisTitleStyle
263265
};
264266

267+
const lastValueIndexes = dimensions.map((_, dimIdx) => {
268+
let lastIdx = -1;
269+
for (let sIdx = series.length - 1; sIdx >= 0; sIdx--) {
270+
const val = series[sIdx].data[dimIdx];
271+
// 只有当值存在且大于 0 时，才认为是这一列的“顶端”
272+
if (val !== null && val !== undefined && val > 0) {
273+
lastIdx = sIdx;
274+
break;
275+
}
276+
}
277+
return lastIdx;
278+
});
265279
// Series
266-
const cartesianSeries = series.map((s) => {
280+
const cartesianSeries = series.map((s, index) => {
281+
const processedData = s.data.map((val, dimIdx) => {
282+
const isTopItem = lastValueIndexes[dimIdx] === index;
283+
284+
// 如果是顶端项，则单独给该 data item 设置样式
285+
if (!isLineOrArea && isStacked && isTopItem) {
286+
return {
287+
value: val,
288+
itemStyle: {
289+
borderRadius: isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]
290+
}
291+
};
292+
}
293+
return val;
294+
});
295+
267296
const item: any = {
268297
name: s.name,
269-
data: s.data,
298+
data: processedData,
270299
type: isLineOrArea ? 'line' : 'bar',
271300
itemStyle: {
272-
borderRadius: !isLineOrArea ? (isHorizontal ? [0, 2, 2, 0] : [2, 2, 0, 0]) : 0
301+
borderRadius: (!isLineOrArea && !isStacked)
302+
? (isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0])
303+
: 0
273304
}
274305
};
275306

@@ -283,21 +314,30 @@ const getCartesianChartOption = (
283314
return item;
284315
});
285316

286-
const dimensionLength = styleConfig.xAxisTitle ? dataConfig.dimensions.length : 1
287-
const bottom = (styleConfig.legendPosition === 'bottom' ? 44 : 0) + dimensionLength * 13;
317+
let grid = {
318+
left: 0,
319+
right: 0,
320+
top: 0,
321+
bottom: 0,
322+
// containLabel: true,
323+
}
324+
if (styleConfig.showLegend) {
325+
const titleBottom = (styleConfig.xAxisTitle ? 18 : 0) + ((dataConfig.dimensions.length - 1) * 10);
326+
const bottom = (styleConfig.legendPosition === 'bottom' ? 44 : 0) + titleBottom;
327+
grid = {
328+
left: styleConfig.legendPosition === 'left' ? 160 : 0,
329+
right: styleConfig.legendPosition === 'right' ? 100 : 0,
330+
top: styleConfig.legendPosition === 'top' ? 40 : 0,
331+
bottom,
332+
}
333+
}
288334

289335
return {
290336
backgroundColor: styleConfig.bgColor,
291337
// title: buildTitleOption(styleConfig),
292338
legend: buildLegendOption(styleConfig, series.map(s => s.name)),
293339
tooltip: buildTooltipOption('axis', tooltipFormatter),
294-
grid: {
295-
left: styleConfig.legendPosition === 'left' ? 160 : 0,
296-
right: styleConfig.legendPosition === 'right' ? 100 : 0,
297-
top: styleConfig.legendPosition === 'top' ? 40 : 0,
298-
bottom,
299-
// containLabel: true,
300-
},
340+
grid,
301341
xAxis: isHorizontal ? valueAxis : categoryAxis,
302342
yAxis: isHorizontal ? categoryAxis : valueAxis,
303343
series: cartesianSeries,

‎src/frontend/platform/src/pages/Dashboard/components/charts/ChartContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ export function ChartContainer({ isPreviewMode, isDark, component }: ChartContai
8282
// if (error || !component.data_config.isConfigured) {
8383
if (error || !component.data_config.isConfigured || !data) {
8484
return (
85-
<div className={`flex items-center justify-center h-full relative ${component.type === ChartType.Metric && 'pt-4'}`}>
85+
<div className={`flex items-center justify-center h-full overflow-hidden relative ${component.type === ChartType.Metric && 'pt-4'}`}>
8686
{component.type === ChartType.Metric && <h3 className="absolute top-0 left-0 text-sm font-medium truncate dark:text-gray-400">
8787
<span className="no-drag cursor-pointer">{component.title}</span>
8888
</h3>}
89-
<img src={`${__APP_ENV__.BASE_URL}/assets/dashboard/ept-${component.type}.png`} className="w-full max-h-full max-w-60" />
89+
<img src={`${__APP_ENV__.BASE_URL}/assets/dashboard/ept-${component.type}.png`} className="max-w-60 max-h-full" />
9090
<div className='flex size-full absolute justify-center items-center'>
9191
<span className="text-sm bg-gray-50/80 px-2 py-1 text-primary truncate">{t('noDataInChart')}</span>
9292
</div>

‎src/frontend/platform/src/pages/Dashboard/components/config/ComponentConfigDrawer.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ const FULL_DEFAULT_STYLE_CONFIG: ComponentStyleConfig = {
2929
bgColor: "",
3030

3131
title: "",
32-
titleFontSize: 14,
33-
titleBold: false,
32+
titleFontSize: 16,
33+
titleBold: true,
3434
titleItalic: false,
3535
titleUnderline: false,
3636
titleStrikethrough: false,
3737
titleAlign: "left",
38-
titleColor: "#000000",
38+
titleColor: "",
3939

4040
xAxisTitle: "",
4141
xAxisFontSize: 14,
@@ -56,13 +56,13 @@ const FULL_DEFAULT_STYLE_CONFIG: ComponentStyleConfig = {
5656
yAxisColor: "#000000",
5757

5858
legendPosition: "bottom",
59-
legendFontSize: 14,
59+
legendFontSize: 12,
6060
legendBold: false,
6161
legendItalic: false,
6262
legendUnderline: false,
6363
legendStrikethrough: false,
6464
legendAlign: "left",
65-
legendColor: "#000000",
65+
legendColor: "#999",
6666

6767
showSubtitle: false,
6868
subtitle: "",
@@ -72,7 +72,7 @@ const FULL_DEFAULT_STYLE_CONFIG: ComponentStyleConfig = {
7272
subtitleItalic: false,
7373
subtitleUnderline: false,
7474
subtitleAlign: "center",
75-
subtitleColor: "#000000",
75+
subtitleColor: "",
7676

7777
metricFontSize: 14,
7878
metricBold: false,
@@ -84,7 +84,7 @@ const FULL_DEFAULT_STYLE_CONFIG: ComponentStyleConfig = {
8484

8585
showLegend: true,
8686
showAxis: true,
87-
showDataLabel: true,
87+
showDataLabel: false,
8888
showGrid: true,
8989
}
9090

‎src/frontend/platform/src/pages/Dashboard/components/editor/ComponentWrapper.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,10 @@ export function ComponentWrapper({
100100

101101
const createTitleStyle = (config) => {
102102
const defaultConfig = {
103-
titleFontSize: 14,
104-
titleColor: "#111",
103+
titleFontSize: 16,
104+
titleColor: "",
105105
titleAlign: "left",
106-
titleBold: false,
106+
titleBold: true,
107107
titleItalic: false,
108108
titleUnderline: false,
109109
titleStrikethrough: false,

0 commit comments

Comments
 (0)