mindol1004/vanillameta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FE-chart] Add series label option at Radar, Gauge chart #413

Browse Source
This commit is contained in:
SA K
2023-02-24 10:53:11 +09:00
parent e9abc4b49f
commit e9f72b7290
19 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend-web/src/widget/modules/gaugechart/GaugeChart.tsx
View File

@@ -33,7 +33,6 @@ const GaugeChart = props => {
},
series: [
{
name: option.title,
type: 'gauge',
progress: {
show: true,
@@ -45,7 +44,7 @@ const GaugeChart = props => {
data: [
{
value: getAggregationData(option.aggregation, dataSet, option.field),
name: option.field,
name: option?.fieldLabel ? option.fieldLabel : option.field,
},
],
itemStyle: {

2
frontend-web/src/widget/modules/linechart/LineChart.tsx
View File

@@ -51,7 +51,7 @@ const LineChart = props => {
if (item.field) {
const series = {
name:
(item?.name ? item.name : item.field) +
(item?.fieldLabel ? item.fieldLabel : item.field) +
(option?.legendAggregation
? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
: ''),

7
frontend-web/src/widget/modules/radarchart/RadarChart.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import { getAggregationDataForChart, getCenter, getLegendOption } from '@/widget/modules/utils/chartUtil';
import { AGGREGATION_LIST } from '@/constant';
const RadarChart = props => {
const { option, dataSet, seriesOp, defaultOp, createOp } = props;
@@ -45,7 +46,11 @@ const RadarChart = props => {
if (item.field) {
const seriesData = {
value: aggrData.map(dataItem => dataItem[item.field]),
name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
name:
(item?.fieldLabel ? item.fieldLabel : item.field) +
(option?.legendAggregation
? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
: ''),
itemStyle: {
color: item.color,
},

2
frontend-web/src/widget/settings/Bar3DChartSetting.tsx
View File

@@ -87,7 +87,7 @@ const Bar3DChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

4
frontend-web/src/widget/settings/Bubble3DChartSetting.tsx
View File

@@ -37,7 +37,7 @@ const Bubble3DChartSetting = props => {
<TextFieldForm
id={`title${index + 1}`}
name={`title${index + 1}`}
label={`시리즈 ${index + 1} 이름`}
label={`시리즈 ${index + 1} 레이블`}
value={item.title}
onChange={event => handleSeriesChange(event, setOption)}
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -98,7 +98,7 @@ const Bubble3DChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

4
frontend-web/src/widget/settings/BubbleChartSetting.tsx
View File

@@ -36,7 +36,7 @@ const BubbleChartSetting = props => {
<TextFieldForm
id={`title${index + 1}`}
name={`title${index + 1}`}
label={`시리즈 ${index + 1} 이름`}
label={`시리즈 ${index + 1} 레이블`}
value={item.title}
onChange={event => handleSeriesChange(event, setOption)}
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -86,7 +86,7 @@ const BubbleChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

2
frontend-web/src/widget/settings/FunnelChartSetting.tsx
View File

@@ -83,7 +83,7 @@ const FunnelChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="레이블 타입"
optionList={PIE_LABEL_LIST}
value={option.series.label}
onChange={handleSeriesChange}

7
frontend-web/src/widget/settings/GaugeChartSetting.tsx
View File

@@ -33,6 +33,13 @@ const GaugeChartSetting = props => {
/>
}
/>
<TextFieldForm
id="fieldLabel"
name="fieldLabel"
label="레이블"
value={option.fieldLabel ? option.fieldLabel : ''}
onChange={event => handleChange(event, setOption)}
/>
<SelectForm
id="aggregation"
name="aggregation"

2
frontend-web/src/widget/settings/HeatmapChartSetting.tsx
View File

@@ -59,7 +59,7 @@ const HeatmapChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

10
frontend-web/src/widget/settings/LineChartSetting.tsx
View File

@@ -58,10 +58,10 @@ const LineChartSetting = props => {
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
/>
<TextFieldForm
id={`name${index + 1}`}
name={`name${index + 1}`}
label="이름"
value={item.name}
id={`fieldLabel${index + 1}`}
name={`fieldLabel${index + 1}`}
label={`레이블`}
value={item.fieldLabel ? item.fieldLabel : ''}
onChange={event => handleSeriesChange(event, setOption)}
endButton={' '}
/>
@@ -98,7 +98,7 @@ const LineChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

4
frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx
View File

@@ -88,7 +88,7 @@ const MixedDonutPieChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="레이블 타입"
optionList={PIE_LABEL_LIST}
value={option.series.label}
onChange={event => handleSeriesChange(event, setOption, 'series', 'label')}
@@ -131,7 +131,7 @@ const MixedDonutPieChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="레이블 타입"
optionList={PIE_LABEL_LIST}
value={option.series.label}
onChange={event => handleSeriesChange(event, setOption, 'pie', 'label')}

4
frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
View File

@@ -148,7 +148,7 @@ const MixedLinePieChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}
@@ -176,7 +176,7 @@ const MixedLinePieChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="레이블 타입"
optionList={PIE_LABEL_LIST}
value={option.pie.label}
onChange={handlePieChange}

2
frontend-web/src/widget/settings/MixedLineStackedBarChartSetting.tsx
View File

@@ -92,7 +92,7 @@ const MixedLineStackedBarChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

2
frontend-web/src/widget/settings/PieChartSetting.tsx
View File

@@ -58,7 +58,7 @@ const PieChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="레이블 타입"
optionList={PIE_LABEL_LIST}
value={option.series.label}
onChange={handleSeriesChange}

2
frontend-web/src/widget/settings/PolarBarChartSetting.tsx
View File

@@ -48,7 +48,7 @@ const PolarBarChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

11
frontend-web/src/widget/settings/RadarChartSetting.tsx
View File

@@ -5,6 +5,7 @@ import ColorButtonForm from '@/components/form/ColorButtonForm';
import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
import TextFieldForm from '@/components/form/TextFieldForm';
const RadarChartSetting = props => {
const { option, setOption, seriesItem, spec } = props;
@@ -66,6 +67,14 @@ const RadarChartSetting = props => {
onChange={event => handleSeriesChange(event, setOption)}
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
/>
<TextFieldForm
id={`fieldLabel${index + 1}`}
name={`fieldLabel${index + 1}`}
label={`레이블`}
value={item.fieldLabel ? item.fieldLabel : ''}
onChange={event => handleSeriesChange(event, setOption)}
endButton={' '}
/>
<SelectForm
id={`aggregation${index + 1}`}
name={`aggregation${index + 1}`}
@@ -98,7 +107,7 @@ const RadarChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

4
frontend-web/src/widget/settings/Scatter3DChartSetting.tsx
View File

@@ -37,7 +37,7 @@ const Scatter3DChartSetting = props => {
<TextFieldForm
id={`title${index + 1}`}
name={`title${index + 1}`}
label={`시리즈 ${index + 1} 이름`}
label={`시리즈 ${index + 1} 레이블`}
value={item.title}
onChange={event => handleSeriesChange(event, setOption)}
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -95,7 +95,7 @@ const Scatter3DChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

4
frontend-web/src/widget/settings/ScatterChartSetting.tsx
View File

@@ -36,7 +36,7 @@ const ScatterChartSetting = props => {
<TextFieldForm
id={`title${index + 1}`}
name={`title${index + 1}`}
label={`시리즈 ${index + 1} 이름`}
label={`시리즈 ${index + 1} 레이블`}
value={item.title}
onChange={event => handleSeriesChange(event, setOption)}
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -83,7 +83,7 @@ const ScatterChartSetting = props => {
))}
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}

2
frontend-web/src/widget/settings/TreemapChartSetting.tsx
View File

@@ -35,7 +35,7 @@ const TreemapChartSetting = props => {
/>
<SelectForm
name="label"
label="레이블"
label="넘버 레이블"
optionList={DISPLAY_LIST}
value={option.label}
onChange={event => handleChange(event, setOption)}