[Vis Editor] Refactoring metrics axes (#59135)
* Fix TS for vislib * Fix TS * Revert table changes * Update unit test * Refactor code in metrics_axes Co-authored-by: maryia-lapata <mary.lopato@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Daniil Suleiman
GitHub
parent
5dcba2a566
commit
0ed7176e4d
|
|
@ -52,59 +52,16 @@ exports[`CategoryAxisPanel component should init with the default set of props 1
|
|||
value={true}
|
||||
/>
|
||||
<LabelOptions
|
||||
axesName="categoryAxes"
|
||||
axis={
|
||||
axisFilterCheckboxName="xAxisFilterLabelsCheckboxCategoryAxis-1"
|
||||
axisLabels={
|
||||
Object {
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": Object {
|
||||
"type": "linear",
|
||||
},
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "category",
|
||||
}
|
||||
}
|
||||
index={0}
|
||||
onPositionChanged={[MockFunction]}
|
||||
setCategoryAxis={[MockFunction]}
|
||||
vis={
|
||||
Object {
|
||||
"type": Object {
|
||||
"editorConfig": Object {
|
||||
"collections": Object {
|
||||
"positions": Array [
|
||||
Object {
|
||||
"text": "Top",
|
||||
"value": "top",
|
||||
},
|
||||
Object {
|
||||
"text": "Left",
|
||||
"value": "left",
|
||||
},
|
||||
Object {
|
||||
"text": "Right",
|
||||
"value": "right",
|
||||
},
|
||||
Object {
|
||||
"text": "Bottom",
|
||||
"value": "bottom",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
"truncate": 0,
|
||||
}
|
||||
}
|
||||
setAxisLabel={[Function]}
|
||||
/>
|
||||
</EuiPanel>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -31,22 +31,6 @@ exports[`ChartOptions component should init with the default set of props 1`] =
|
|||
<SelectOption
|
||||
id="seriesType0"
|
||||
label="Chart type"
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"text": "Line",
|
||||
"value": "line",
|
||||
},
|
||||
Object {
|
||||
"text": "Area",
|
||||
"value": "area",
|
||||
},
|
||||
Object {
|
||||
"text": "Bar",
|
||||
"value": "histogram",
|
||||
},
|
||||
]
|
||||
}
|
||||
paramName="type"
|
||||
setValue={[Function]}
|
||||
value="histogram"
|
||||
|
|
@ -56,18 +40,6 @@ exports[`ChartOptions component should init with the default set of props 1`] =
|
|||
<SelectOption
|
||||
id="seriesMode0"
|
||||
label="Mode"
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"text": "Normal",
|
||||
"value": "normal",
|
||||
},
|
||||
Object {
|
||||
"text": "Stacked",
|
||||
"value": "stacked",
|
||||
},
|
||||
]
|
||||
}
|
||||
paramName="mode"
|
||||
setValue={[Function]}
|
||||
value="stacked"
|
||||
|
|
|
|||
|
|
@ -3,94 +3,54 @@
|
|||
exports[`MetricsAxisOptions component should init with the default set of props 1`] = `
|
||||
<Fragment>
|
||||
<SeriesPanel
|
||||
aggs={
|
||||
Object {
|
||||
"aggs": Array [
|
||||
Object {
|
||||
"id": "1",
|
||||
"makeLabel": [Function],
|
||||
"type": Object {
|
||||
"name": "count",
|
||||
},
|
||||
},
|
||||
],
|
||||
"bySchemaName": [Function],
|
||||
}
|
||||
}
|
||||
changeValueAxis={[Function]}
|
||||
isTabSelected={true}
|
||||
setParamByIndex={[Function]}
|
||||
setValue={[MockFunction]}
|
||||
stateParams={
|
||||
Object {
|
||||
"categoryAxes": Array [
|
||||
Object {
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": Object {
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "category",
|
||||
seriesParams={
|
||||
Array [
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Count",
|
||||
},
|
||||
],
|
||||
"grid": Object {
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "area",
|
||||
"valueAxis": "ValueAxis-1",
|
||||
},
|
||||
"seriesParams": Array [
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Count",
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
]
|
||||
}
|
||||
setParamByIndex={[Function]}
|
||||
valueAxes={
|
||||
Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "area",
|
||||
"valueAxis": "ValueAxis-1",
|
||||
"truncate": 0,
|
||||
},
|
||||
],
|
||||
"valueAxes": Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "LeftAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
"name": "LeftAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
],
|
||||
}
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
]
|
||||
}
|
||||
vis={
|
||||
Object {
|
||||
|
|
@ -113,96 +73,56 @@ exports[`MetricsAxisOptions component should init with the default set of props
|
|||
/>
|
||||
<ValueAxesPanel
|
||||
addValueAxis={[Function]}
|
||||
aggs={
|
||||
Object {
|
||||
"aggs": Array [
|
||||
Object {
|
||||
"id": "1",
|
||||
"makeLabel": [Function],
|
||||
"type": Object {
|
||||
"name": "count",
|
||||
},
|
||||
},
|
||||
],
|
||||
"bySchemaName": [Function],
|
||||
}
|
||||
}
|
||||
isCategoryAxisHorizontal={true}
|
||||
isTabSelected={true}
|
||||
onValueAxisPositionChanged={[Function]}
|
||||
removeValueAxis={[Function]}
|
||||
setParamByIndex={[Function]}
|
||||
setValue={[MockFunction]}
|
||||
stateParams={
|
||||
Object {
|
||||
"categoryAxes": Array [
|
||||
Object {
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": Object {
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "category",
|
||||
seriesParams={
|
||||
Array [
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Count",
|
||||
},
|
||||
],
|
||||
"grid": Object {
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "area",
|
||||
"valueAxis": "ValueAxis-1",
|
||||
},
|
||||
"seriesParams": Array [
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Count",
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
]
|
||||
}
|
||||
setParamByIndex={[Function]}
|
||||
valueAxes={
|
||||
Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "area",
|
||||
"valueAxis": "ValueAxis-1",
|
||||
"truncate": 0,
|
||||
},
|
||||
],
|
||||
"valueAxes": Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "LeftAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
"name": "LeftAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
],
|
||||
}
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
]
|
||||
}
|
||||
vis={
|
||||
Object {
|
||||
|
|
@ -224,20 +144,6 @@ exports[`MetricsAxisOptions component should init with the default set of props
|
|||
size="s"
|
||||
/>
|
||||
<CategoryAxisPanel
|
||||
aggs={
|
||||
Object {
|
||||
"aggs": Array [
|
||||
Object {
|
||||
"id": "1",
|
||||
"makeLabel": [Function],
|
||||
"type": Object {
|
||||
"name": "count",
|
||||
},
|
||||
},
|
||||
],
|
||||
"bySchemaName": [Function],
|
||||
}
|
||||
}
|
||||
axis={
|
||||
Object {
|
||||
"id": "CategoryAxis-1",
|
||||
|
|
@ -259,81 +165,8 @@ exports[`MetricsAxisOptions component should init with the default set of props
|
|||
"type": "category",
|
||||
}
|
||||
}
|
||||
isTabSelected={true}
|
||||
onPositionChanged={[Function]}
|
||||
setCategoryAxis={[Function]}
|
||||
setValue={[MockFunction]}
|
||||
stateParams={
|
||||
Object {
|
||||
"categoryAxes": Array [
|
||||
Object {
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": Object {
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "category",
|
||||
},
|
||||
],
|
||||
"grid": Object {
|
||||
"valueAxis": "ValueAxis-1",
|
||||
},
|
||||
"seriesParams": Array [
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Count",
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "area",
|
||||
"valueAxis": "ValueAxis-1",
|
||||
},
|
||||
],
|
||||
"valueAxes": Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "LeftAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
vis={
|
||||
Object {
|
||||
"setVisType": [MockFunction],
|
||||
|
|
|
|||
|
|
@ -22,15 +22,15 @@ exports[`LabelOptions component should init with the default set of props 1`] =
|
|||
<SwitchOption
|
||||
label="Show labels"
|
||||
paramName="show"
|
||||
setValue={[Function]}
|
||||
setValue={[MockFunction]}
|
||||
value={true}
|
||||
/>
|
||||
<SwitchOption
|
||||
data-test-subj="xAxisFilterLabelsCheckbox-ValueAxis-1"
|
||||
data-test-subj=""
|
||||
disabled={false}
|
||||
label="Filter labels"
|
||||
paramName="filter"
|
||||
setValue={[Function]}
|
||||
setValue={[MockFunction]}
|
||||
value={true}
|
||||
/>
|
||||
<EuiSpacer
|
||||
|
|
@ -66,7 +66,7 @@ exports[`LabelOptions component should init with the default set of props 1`] =
|
|||
<EuiFlexItem>
|
||||
<TruncateLabelsOption
|
||||
disabled={false}
|
||||
setValue={[Function]}
|
||||
setValue={[MockFunction]}
|
||||
value={0}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
|
|||
size="m"
|
||||
/>
|
||||
<ValueAxisOptions
|
||||
addValueAxis={[MockFunction]}
|
||||
axis={
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
|
|
@ -120,93 +119,33 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
|
|||
index={0}
|
||||
isCategoryAxisHorizontal={false}
|
||||
onValueAxisPositionChanged={[MockFunction]}
|
||||
removeValueAxis={[MockFunction]}
|
||||
setMultipleValidity={[MockFunction]}
|
||||
setParamByIndex={[MockFunction]}
|
||||
stateParams={
|
||||
valueAxis={
|
||||
Object {
|
||||
"seriesParams": Array [
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Count",
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "histogram",
|
||||
"valueAxis": "ValueAxis-1",
|
||||
},
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Average",
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "histogram",
|
||||
"valueAxis": "ValueAxis-2",
|
||||
},
|
||||
],
|
||||
"valueAxes": Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
Object {
|
||||
"id": "ValueAxis-2",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "right",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
],
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
}
|
||||
}
|
||||
vis={
|
||||
|
|
@ -232,6 +171,20 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
|
|||
"value": "silhouette",
|
||||
},
|
||||
],
|
||||
"interpolationModes": Array [
|
||||
Object {
|
||||
"text": "Straight",
|
||||
"value": "linear",
|
||||
},
|
||||
Object {
|
||||
"text": "Smoothed",
|
||||
"value": "cardinal",
|
||||
},
|
||||
Object {
|
||||
"text": "Stepped",
|
||||
"value": "step-after",
|
||||
},
|
||||
],
|
||||
"positions": Array [
|
||||
Object {
|
||||
"text": "Top",
|
||||
|
|
@ -316,7 +269,6 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
|
|||
size="m"
|
||||
/>
|
||||
<ValueAxisOptions
|
||||
addValueAxis={[MockFunction]}
|
||||
axis={
|
||||
Object {
|
||||
"id": "ValueAxis-2",
|
||||
|
|
@ -347,93 +299,33 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
|
|||
index={1}
|
||||
isCategoryAxisHorizontal={false}
|
||||
onValueAxisPositionChanged={[MockFunction]}
|
||||
removeValueAxis={[MockFunction]}
|
||||
setMultipleValidity={[MockFunction]}
|
||||
setParamByIndex={[MockFunction]}
|
||||
stateParams={
|
||||
valueAxis={
|
||||
Object {
|
||||
"seriesParams": Array [
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Count",
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "histogram",
|
||||
"valueAxis": "ValueAxis-1",
|
||||
},
|
||||
Object {
|
||||
"data": Object {
|
||||
"id": "1",
|
||||
"label": "Average",
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "linear",
|
||||
"lineWidth": 2,
|
||||
"mode": "stacked",
|
||||
"show": true,
|
||||
"showCircles": true,
|
||||
"type": "histogram",
|
||||
"valueAxis": "ValueAxis-2",
|
||||
},
|
||||
],
|
||||
"valueAxes": Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
Object {
|
||||
"id": "ValueAxis-2",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "right",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
],
|
||||
"id": "ValueAxis-2",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "right",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
}
|
||||
}
|
||||
vis={
|
||||
|
|
@ -459,6 +351,20 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
|
|||
"value": "silhouette",
|
||||
},
|
||||
],
|
||||
"interpolationModes": Array [
|
||||
Object {
|
||||
"text": "Straight",
|
||||
"value": "linear",
|
||||
},
|
||||
Object {
|
||||
"text": "Smoothed",
|
||||
"value": "cardinal",
|
||||
},
|
||||
Object {
|
||||
"text": "Stepped",
|
||||
"value": "step-after",
|
||||
},
|
||||
],
|
||||
"positions": Array [
|
||||
Object {
|
||||
"text": "Top",
|
||||
|
|
|
|||
|
|
@ -102,151 +102,16 @@ exports[`ValueAxisOptions component should init with the default set of props 1`
|
|||
value=""
|
||||
/>
|
||||
<LabelOptions
|
||||
axesName="valueAxes"
|
||||
axis={
|
||||
axisFilterCheckboxName="yAxisFilterLabelsCheckboxValueAxis-1"
|
||||
axisLabels={
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
}
|
||||
}
|
||||
index={0}
|
||||
isCategoryAxisHorizontal={false}
|
||||
onValueAxisPositionChanged={[MockFunction]}
|
||||
setMultipleValidity={[MockFunction]}
|
||||
setParamByIndex={[MockFunction]}
|
||||
stateParams={
|
||||
Object {
|
||||
"categoryAxes": Array [
|
||||
Object {
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": Object {
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "category",
|
||||
},
|
||||
],
|
||||
"valueAxes": Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
vis={
|
||||
Object {
|
||||
"type": Object {
|
||||
"editorConfig": Object {
|
||||
"collections": Object {
|
||||
"axisModes": Array [
|
||||
Object {
|
||||
"text": "Normal",
|
||||
"value": "normal",
|
||||
},
|
||||
Object {
|
||||
"text": "Percentage",
|
||||
"value": "percentage",
|
||||
},
|
||||
Object {
|
||||
"text": "Wiggle",
|
||||
"value": "wiggle",
|
||||
},
|
||||
Object {
|
||||
"text": "Silhouette",
|
||||
"value": "silhouette",
|
||||
},
|
||||
],
|
||||
"positions": Array [
|
||||
Object {
|
||||
"text": "Top",
|
||||
"value": "top",
|
||||
},
|
||||
Object {
|
||||
"text": "Left",
|
||||
"value": "left",
|
||||
},
|
||||
Object {
|
||||
"text": "Right",
|
||||
"value": "right",
|
||||
},
|
||||
Object {
|
||||
"text": "Bottom",
|
||||
"value": "bottom",
|
||||
},
|
||||
],
|
||||
"scaleTypes": Array [
|
||||
Object {
|
||||
"text": "Linear",
|
||||
"value": "linear",
|
||||
},
|
||||
Object {
|
||||
"text": "Log",
|
||||
"value": "log",
|
||||
},
|
||||
Object {
|
||||
"text": "Square root",
|
||||
"value": "square root",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
"truncate": 0,
|
||||
}
|
||||
}
|
||||
setAxisLabel={[Function]}
|
||||
/>
|
||||
<EuiHorizontalRule
|
||||
margin="s"
|
||||
|
|
@ -264,152 +129,19 @@ exports[`ValueAxisOptions component should init with the default set of props 1`
|
|||
size="m"
|
||||
/>
|
||||
<CustomExtentsOptions
|
||||
axis={
|
||||
axisScale={
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
}
|
||||
}
|
||||
index={0}
|
||||
isCategoryAxisHorizontal={false}
|
||||
onValueAxisPositionChanged={[MockFunction]}
|
||||
setMultipleValidity={[MockFunction]}
|
||||
setParamByIndex={[MockFunction]}
|
||||
setValueAxis={[Function]}
|
||||
setValueAxisScale={[Function]}
|
||||
stateParams={
|
||||
Object {
|
||||
"categoryAxes": Array [
|
||||
Object {
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": Object {
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "category",
|
||||
},
|
||||
],
|
||||
"valueAxes": Array [
|
||||
Object {
|
||||
"id": "ValueAxis-1",
|
||||
"labels": Object {
|
||||
"color": "black",
|
||||
"filter": true,
|
||||
"show": true,
|
||||
"truncate": 0,
|
||||
},
|
||||
"name": "ValueAxis-1",
|
||||
"position": "left",
|
||||
"scale": Object {
|
||||
"boundsMargin": 1,
|
||||
"defaultYExtents": true,
|
||||
"max": 2,
|
||||
"min": 1,
|
||||
"setYExtents": true,
|
||||
"type": "linear",
|
||||
},
|
||||
"show": true,
|
||||
"style": Object {},
|
||||
"title": Object {
|
||||
"text": "",
|
||||
},
|
||||
"type": "value",
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
vis={
|
||||
Object {
|
||||
"type": Object {
|
||||
"editorConfig": Object {
|
||||
"collections": Object {
|
||||
"axisModes": Array [
|
||||
Object {
|
||||
"text": "Normal",
|
||||
"value": "normal",
|
||||
},
|
||||
Object {
|
||||
"text": "Percentage",
|
||||
"value": "percentage",
|
||||
},
|
||||
Object {
|
||||
"text": "Wiggle",
|
||||
"value": "wiggle",
|
||||
},
|
||||
Object {
|
||||
"text": "Silhouette",
|
||||
"value": "silhouette",
|
||||
},
|
||||
],
|
||||
"positions": Array [
|
||||
Object {
|
||||
"text": "Top",
|
||||
"value": "top",
|
||||
},
|
||||
Object {
|
||||
"text": "Left",
|
||||
"value": "left",
|
||||
},
|
||||
Object {
|
||||
"text": "Right",
|
||||
"value": "right",
|
||||
},
|
||||
Object {
|
||||
"text": "Bottom",
|
||||
"value": "bottom",
|
||||
},
|
||||
],
|
||||
"scaleTypes": Array [
|
||||
Object {
|
||||
"text": "Linear",
|
||||
"value": "linear",
|
||||
},
|
||||
Object {
|
||||
"text": "Log",
|
||||
"value": "log",
|
||||
},
|
||||
Object {
|
||||
"text": "Square root",
|
||||
"value": "square root",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</EuiAccordion>
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -21,14 +21,12 @@ import React from 'react';
|
|||
import { shallow } from 'enzyme';
|
||||
import { CategoryAxisPanel, CategoryAxisPanelProps } from './category_axis_panel';
|
||||
import { Axis } from '../../../types';
|
||||
import { Positions, getPositions } from '../../../utils/collections';
|
||||
import { Positions } from '../../../utils/collections';
|
||||
import { LabelOptions } from './label_options';
|
||||
import { categoryAxis } from './mocks';
|
||||
import { categoryAxis, vis } from './mocks';
|
||||
|
||||
jest.mock('ui/new_platform');
|
||||
|
||||
const positions = getPositions();
|
||||
|
||||
describe('CategoryAxisPanel component', () => {
|
||||
let setCategoryAxis: jest.Mock;
|
||||
let onPositionChanged: jest.Mock;
|
||||
|
|
@ -42,16 +40,10 @@ describe('CategoryAxisPanel component', () => {
|
|||
|
||||
defaultProps = {
|
||||
axis,
|
||||
vis: {
|
||||
type: {
|
||||
editorConfig: {
|
||||
collections: { positions },
|
||||
},
|
||||
},
|
||||
},
|
||||
vis,
|
||||
onPositionChanged,
|
||||
setCategoryAxis,
|
||||
} as any;
|
||||
};
|
||||
});
|
||||
|
||||
it('should init with the default set of props', () => {
|
||||
|
|
|
|||
|
|
@ -23,21 +23,25 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
import { VisOptionsProps } from '../../../../../vis_default_editor/public';
|
||||
import { BasicVislibParams, Axis } from '../../../types';
|
||||
import { VisOptionsProps } from 'src/legacy/core_plugins/vis_default_editor/public';
|
||||
import { Axis } from '../../../types';
|
||||
import { SelectOption, SwitchOption } from '../../common';
|
||||
import { LabelOptions } from './label_options';
|
||||
import { LabelOptions, SetAxisLabel } from './label_options';
|
||||
import { Positions } from '../../../utils/collections';
|
||||
|
||||
export interface CategoryAxisPanelProps extends VisOptionsProps<BasicVislibParams> {
|
||||
export interface CategoryAxisPanelProps {
|
||||
axis: Axis;
|
||||
onPositionChanged: (position: Positions) => void;
|
||||
setCategoryAxis: (value: Axis) => void;
|
||||
vis: VisOptionsProps['vis'];
|
||||
}
|
||||
|
||||
function CategoryAxisPanel(props: CategoryAxisPanelProps) {
|
||||
const { axis, onPositionChanged, vis, setCategoryAxis } = props;
|
||||
|
||||
function CategoryAxisPanel({
|
||||
axis,
|
||||
onPositionChanged,
|
||||
vis,
|
||||
setCategoryAxis,
|
||||
}: CategoryAxisPanelProps) {
|
||||
const setAxis = useCallback(
|
||||
<T extends keyof Axis>(paramName: T, value: Axis[T]) => {
|
||||
const updatedAxis = {
|
||||
|
|
@ -57,6 +61,17 @@ function CategoryAxisPanel(props: CategoryAxisPanelProps) {
|
|||
[setAxis, onPositionChanged]
|
||||
);
|
||||
|
||||
const setAxisLabel: SetAxisLabel = useCallback(
|
||||
(paramName, value) => {
|
||||
const labels = {
|
||||
...axis.labels,
|
||||
[paramName]: value,
|
||||
};
|
||||
setAxis('labels', labels);
|
||||
},
|
||||
[axis.labels, setAxis]
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiPanel paddingSize="s">
|
||||
<EuiTitle size="xs">
|
||||
|
|
@ -89,7 +104,13 @@ function CategoryAxisPanel(props: CategoryAxisPanelProps) {
|
|||
setValue={setAxis}
|
||||
/>
|
||||
|
||||
{axis.show && <LabelOptions axesName="categoryAxes" index={0} {...props} />}
|
||||
{axis.show && (
|
||||
<LabelOptions
|
||||
axisLabels={axis.labels}
|
||||
axisFilterCheckboxName={`xAxisFilterLabelsCheckbox${axis.id}`}
|
||||
setAxisLabel={setAxisLabel}
|
||||
/>
|
||||
)}
|
||||
</EuiPanel>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,21 +22,11 @@ import { shallow } from 'enzyme';
|
|||
import { ChartOptions, ChartOptionsParams } from './chart_options';
|
||||
import { SeriesParam } from '../../../types';
|
||||
import { LineOptions } from './line_options';
|
||||
import {
|
||||
ChartTypes,
|
||||
ChartModes,
|
||||
getInterpolationModes,
|
||||
getChartTypes,
|
||||
getChartModes,
|
||||
} from '../../../utils/collections';
|
||||
import { valueAxis, seriesParam } from './mocks';
|
||||
import { ChartTypes, ChartModes } from '../../../utils/collections';
|
||||
import { valueAxis, seriesParam, vis } from './mocks';
|
||||
|
||||
jest.mock('ui/new_platform');
|
||||
|
||||
const interpolationModes = getInterpolationModes();
|
||||
const chartTypes = getChartTypes();
|
||||
const chartModes = getChartModes();
|
||||
|
||||
describe('ChartOptions component', () => {
|
||||
let setParamByIndex: jest.Mock;
|
||||
let changeValueAxis: jest.Mock;
|
||||
|
|
@ -51,19 +41,11 @@ describe('ChartOptions component', () => {
|
|||
defaultProps = {
|
||||
index: 0,
|
||||
chart,
|
||||
vis: {
|
||||
type: {
|
||||
editorConfig: {
|
||||
collections: { interpolationModes, chartTypes, chartModes },
|
||||
},
|
||||
},
|
||||
},
|
||||
stateParams: {
|
||||
valueAxes: [valueAxis],
|
||||
},
|
||||
vis,
|
||||
valueAxes: [valueAxis],
|
||||
setParamByIndex,
|
||||
changeValueAxis,
|
||||
} as any;
|
||||
};
|
||||
});
|
||||
|
||||
it('should init with the default set of props', () => {
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ import React, { useMemo, useCallback } from 'react';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
|
||||
import { VisOptionsProps } from '../../../../../vis_default_editor/public';
|
||||
import { BasicVislibParams, SeriesParam, ValueAxis } from '../../../types';
|
||||
import { Vis } from 'src/legacy/core_plugins/visualizations/public';
|
||||
import { SeriesParam, ValueAxis } from '../../../types';
|
||||
import { ChartTypes } from '../../../utils/collections';
|
||||
import { SelectOption } from '../../common';
|
||||
import { LineOptions } from './line_options';
|
||||
|
|
@ -31,17 +31,19 @@ import { SetParamByIndex, ChangeValueAxis } from './';
|
|||
|
||||
export type SetChart = <T extends keyof SeriesParam>(paramName: T, value: SeriesParam[T]) => void;
|
||||
|
||||
export interface ChartOptionsParams extends VisOptionsProps<BasicVislibParams> {
|
||||
export interface ChartOptionsParams {
|
||||
chart: SeriesParam;
|
||||
index: number;
|
||||
changeValueAxis: ChangeValueAxis;
|
||||
setParamByIndex: SetParamByIndex;
|
||||
valueAxes: ValueAxis[];
|
||||
vis: Vis;
|
||||
}
|
||||
|
||||
function ChartOptions({
|
||||
chart,
|
||||
index,
|
||||
stateParams,
|
||||
valueAxes,
|
||||
vis,
|
||||
changeValueAxis,
|
||||
setParamByIndex,
|
||||
|
|
@ -62,7 +64,7 @@ function ChartOptions({
|
|||
|
||||
const valueAxesOptions = useMemo(
|
||||
() => [
|
||||
...stateParams.valueAxes.map(({ id, name }: ValueAxis) => ({
|
||||
...valueAxes.map(({ id, name }: ValueAxis) => ({
|
||||
text: name,
|
||||
value: id,
|
||||
})),
|
||||
|
|
@ -73,7 +75,7 @@ function ChartOptions({
|
|||
value: 'new',
|
||||
},
|
||||
],
|
||||
[stateParams.valueAxes]
|
||||
[valueAxes]
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
setMultipleValidity = jest.fn();
|
||||
|
||||
defaultProps = {
|
||||
axis: { ...valueAxis },
|
||||
axisScale: { ...valueAxis.scale },
|
||||
setValueAxis,
|
||||
setValueAxisScale,
|
||||
setMultipleValidity,
|
||||
|
|
@ -57,7 +57,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
|
||||
describe('boundsMargin', () => {
|
||||
it('should set validity as true when value is positive', () => {
|
||||
defaultProps.axis.scale.boundsMargin = 5;
|
||||
defaultProps.axisScale.boundsMargin = 5;
|
||||
mount(<CustomExtentsOptions {...defaultProps} />);
|
||||
|
||||
expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
|
||||
|
|
@ -66,17 +66,17 @@ describe('CustomExtentsOptions component', () => {
|
|||
it('should set validity as true when value is empty', () => {
|
||||
const comp = mount(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.setProps({
|
||||
axis: { ...valueAxis, scale: { ...valueAxis.scale, boundsMargin: undefined } },
|
||||
axisScale: { ...valueAxis.scale, boundsMargin: undefined },
|
||||
});
|
||||
|
||||
expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
|
||||
});
|
||||
|
||||
it('should set validity as false when value is negative', () => {
|
||||
defaultProps.axis.scale.defaultYExtents = true;
|
||||
defaultProps.axisScale.defaultYExtents = true;
|
||||
const comp = mount(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.setProps({
|
||||
axis: { ...valueAxis, scale: { ...valueAxis.scale, boundsMargin: -1 } },
|
||||
axisScale: { ...valueAxis.scale, boundsMargin: -1 },
|
||||
});
|
||||
|
||||
expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, false);
|
||||
|
|
@ -91,7 +91,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
});
|
||||
|
||||
it('should hide bounds margin input when defaultYExtents is false', () => {
|
||||
defaultProps.axis.scale = { ...defaultProps.axis.scale, defaultYExtents: false };
|
||||
defaultProps.axisScale = { ...defaultProps.axisScale, defaultYExtents: false };
|
||||
const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
|
||||
|
||||
expect(comp.find({ paramName: BOUNDS_MARGIN }).exists()).toBeFalsy();
|
||||
|
|
@ -102,7 +102,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
comp.find({ paramName: DEFAULT_Y_EXTENTS }).prop('setValue')(DEFAULT_Y_EXTENTS, true);
|
||||
|
||||
expect(setMultipleValidity).not.toBeCalled();
|
||||
expect(setValueAxis).toBeCalledWith(SCALE, defaultProps.axis.scale);
|
||||
expect(setValueAxis).toBeCalledWith(SCALE, defaultProps.axisScale);
|
||||
});
|
||||
|
||||
it('should reset boundsMargin when value is false', () => {
|
||||
|
|
@ -110,7 +110,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
comp.find({ paramName: DEFAULT_Y_EXTENTS }).prop('setValue')(DEFAULT_Y_EXTENTS, false);
|
||||
|
||||
const newScale = {
|
||||
...defaultProps.axis.scale,
|
||||
...defaultProps.axisScale,
|
||||
boundsMargin: undefined,
|
||||
defaultYExtents: false,
|
||||
};
|
||||
|
|
@ -126,7 +126,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
});
|
||||
|
||||
it('should hide YExtents when value is false', () => {
|
||||
defaultProps.axis.scale = { ...defaultProps.axis.scale, setYExtents: false };
|
||||
defaultProps.axisScale = { ...defaultProps.axisScale, setYExtents: false };
|
||||
const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
|
||||
|
||||
expect(comp.find(YExtents).exists()).toBeFalsy();
|
||||
|
|
@ -136,7 +136,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.find({ paramName: SET_Y_EXTENTS }).prop('setValue')(SET_Y_EXTENTS, true);
|
||||
|
||||
expect(setValueAxis).toBeCalledWith(SCALE, defaultProps.axis.scale);
|
||||
expect(setValueAxis).toBeCalledWith(SCALE, defaultProps.axisScale);
|
||||
});
|
||||
|
||||
it('should reset min and max when value is false', () => {
|
||||
|
|
@ -144,7 +144,7 @@ describe('CustomExtentsOptions component', () => {
|
|||
comp.find({ paramName: SET_Y_EXTENTS }).prop('setValue')(SET_Y_EXTENTS, false);
|
||||
|
||||
const newScale = {
|
||||
...defaultProps.axis.scale,
|
||||
...defaultProps.axisScale,
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
setYExtents: false,
|
||||
|
|
|
|||
|
|
@ -26,14 +26,14 @@ import { YExtents } from './y_extents';
|
|||
import { SetScale } from './value_axis_options';
|
||||
|
||||
export interface CustomExtentsOptionsProps {
|
||||
axis: ValueAxis;
|
||||
axisScale: ValueAxis['scale'];
|
||||
setMultipleValidity(paramName: string, isValid: boolean): void;
|
||||
setValueAxis<T extends keyof ValueAxis>(paramName: T, value: ValueAxis[T]): void;
|
||||
setValueAxisScale: SetScale;
|
||||
}
|
||||
|
||||
function CustomExtentsOptions({
|
||||
axis,
|
||||
axisScale,
|
||||
setMultipleValidity,
|
||||
setValueAxis,
|
||||
setValueAxisScale,
|
||||
|
|
@ -44,7 +44,7 @@ function CustomExtentsOptions({
|
|||
);
|
||||
|
||||
const isBoundsMarginValid =
|
||||
!axis.scale.defaultYExtents || !axis.scale.boundsMargin || axis.scale.boundsMargin >= 0;
|
||||
!axisScale.defaultYExtents || !axisScale.boundsMargin || axisScale.boundsMargin >= 0;
|
||||
|
||||
const setBoundsMargin = useCallback(
|
||||
(paramName: 'boundsMargin', value: number | '') =>
|
||||
|
|
@ -54,25 +54,25 @@ function CustomExtentsOptions({
|
|||
|
||||
const onDefaultYExtentsChange = useCallback(
|
||||
(paramName: 'defaultYExtents', value: boolean) => {
|
||||
const scale = { ...axis.scale, [paramName]: value };
|
||||
const scale = { ...axisScale, [paramName]: value };
|
||||
if (!scale.defaultYExtents) {
|
||||
delete scale.boundsMargin;
|
||||
}
|
||||
setValueAxis('scale', scale);
|
||||
},
|
||||
[setValueAxis, axis.scale]
|
||||
[axisScale, setValueAxis]
|
||||
);
|
||||
|
||||
const onSetYExtentsChange = useCallback(
|
||||
(paramName: 'setYExtents', value: boolean) => {
|
||||
const scale = { ...axis.scale, [paramName]: value };
|
||||
const scale = { ...axisScale, [paramName]: value };
|
||||
if (!scale.setYExtents) {
|
||||
delete scale.min;
|
||||
delete scale.max;
|
||||
}
|
||||
setValueAxis('scale', scale);
|
||||
},
|
||||
[setValueAxis, axis.scale]
|
||||
[axisScale, setValueAxis]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -91,11 +91,11 @@ function CustomExtentsOptions({
|
|||
}
|
||||
)}
|
||||
paramName="defaultYExtents"
|
||||
value={axis.scale.defaultYExtents}
|
||||
value={axisScale.defaultYExtents}
|
||||
setValue={onDefaultYExtentsChange}
|
||||
/>
|
||||
|
||||
{axis.scale.defaultYExtents && (
|
||||
{axisScale.defaultYExtents && (
|
||||
<>
|
||||
<NumberInputOption
|
||||
error={!isBoundsMarginValid && invalidBoundsMarginMessage}
|
||||
|
|
@ -109,7 +109,7 @@ function CustomExtentsOptions({
|
|||
step={0.1}
|
||||
min={0}
|
||||
paramName="boundsMargin"
|
||||
value={axis.scale.boundsMargin}
|
||||
value={axisScale.boundsMargin}
|
||||
setValue={setBoundsMargin}
|
||||
/>
|
||||
</>
|
||||
|
|
@ -121,13 +121,13 @@ function CustomExtentsOptions({
|
|||
defaultMessage: 'Set axis extents',
|
||||
})}
|
||||
paramName="setYExtents"
|
||||
value={axis.scale.setYExtents}
|
||||
value={axisScale.setYExtents}
|
||||
setValue={onSetYExtentsChange}
|
||||
/>
|
||||
|
||||
{axis.scale.setYExtents && (
|
||||
{axisScale.setYExtents && (
|
||||
<YExtents
|
||||
scale={axis.scale}
|
||||
scale={axisScale}
|
||||
setScale={setValueAxisScale}
|
||||
setMultipleValidity={setMultipleValidity}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -304,7 +304,13 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
|
|||
|
||||
return isTabSelected ? (
|
||||
<>
|
||||
<SeriesPanel setParamByIndex={setParamByIndex} changeValueAxis={changeValueAxis} {...props} />
|
||||
<SeriesPanel
|
||||
changeValueAxis={changeValueAxis}
|
||||
setParamByIndex={setParamByIndex}
|
||||
seriesParams={stateParams.seriesParams}
|
||||
valueAxes={stateParams.valueAxes}
|
||||
vis={vis}
|
||||
/>
|
||||
<EuiSpacer size="s" />
|
||||
<ValueAxesPanel
|
||||
addValueAxis={addValueAxis}
|
||||
|
|
@ -312,14 +318,17 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
|
|||
removeValueAxis={removeValueAxis}
|
||||
onValueAxisPositionChanged={onValueAxisPositionChanged}
|
||||
setParamByIndex={setParamByIndex}
|
||||
{...props}
|
||||
setMultipleValidity={props.setMultipleValidity}
|
||||
seriesParams={stateParams.seriesParams}
|
||||
valueAxes={stateParams.valueAxes}
|
||||
vis={vis}
|
||||
/>
|
||||
<EuiSpacer size="s" />
|
||||
<CategoryAxisPanel
|
||||
{...props}
|
||||
axis={stateParams.categoryAxes[0]}
|
||||
onPositionChanged={onCategoryAxisPositionChanged}
|
||||
setCategoryAxis={setCategoryAxis}
|
||||
vis={vis}
|
||||
/>
|
||||
</>
|
||||
) : null;
|
||||
|
|
|
|||
|
|
@ -21,32 +21,26 @@ import React from 'react';
|
|||
import { shallow } from 'enzyme';
|
||||
import { LabelOptions, LabelOptionsProps } from './label_options';
|
||||
import { TruncateLabelsOption } from '../../common';
|
||||
import { valueAxis, categoryAxis } from './mocks';
|
||||
import { valueAxis } from './mocks';
|
||||
|
||||
jest.mock('ui/new_platform');
|
||||
|
||||
const FILTER = 'filter';
|
||||
const ROTATE = 'rotate';
|
||||
const DISABLED = 'disabled';
|
||||
const CATEGORY_AXES = 'categoryAxes';
|
||||
|
||||
describe('LabelOptions component', () => {
|
||||
let setValue: jest.Mock;
|
||||
let setAxisLabel: jest.Mock;
|
||||
let defaultProps: LabelOptionsProps;
|
||||
|
||||
beforeEach(() => {
|
||||
setValue = jest.fn();
|
||||
setAxisLabel = jest.fn();
|
||||
|
||||
defaultProps = {
|
||||
axis: { ...valueAxis },
|
||||
axesName: CATEGORY_AXES,
|
||||
index: 0,
|
||||
stateParams: {
|
||||
categoryAxes: [{ ...categoryAxis }],
|
||||
valueAxes: [{ ...valueAxis }],
|
||||
} as any,
|
||||
setValue,
|
||||
} as any;
|
||||
axisLabels: { ...valueAxis.labels },
|
||||
axisFilterCheckboxName: '',
|
||||
setAxisLabel,
|
||||
};
|
||||
});
|
||||
|
||||
it('should init with the default set of props', () => {
|
||||
|
|
@ -64,7 +58,7 @@ describe('LabelOptions component', () => {
|
|||
});
|
||||
|
||||
it('should disable other fields when axis.labels.show is false', () => {
|
||||
defaultProps.axis.labels.show = false;
|
||||
defaultProps.axisLabels.show = false;
|
||||
const comp = shallow(<LabelOptions {...defaultProps} />);
|
||||
|
||||
expect(comp.find({ paramName: FILTER }).prop(DISABLED)).toBeTruthy();
|
||||
|
|
@ -76,25 +70,20 @@ describe('LabelOptions component', () => {
|
|||
const comp = shallow(<LabelOptions {...defaultProps} />);
|
||||
comp.find({ paramName: ROTATE }).prop('setValue')(ROTATE, '5');
|
||||
|
||||
const newAxes = [{ ...categoryAxis, labels: { ...categoryAxis.labels, rotate: 5 } }];
|
||||
expect(setValue).toBeCalledWith(CATEGORY_AXES, newAxes);
|
||||
expect(setAxisLabel).toBeCalledWith('rotate', 5);
|
||||
});
|
||||
|
||||
it('should set filter value', () => {
|
||||
const comp = shallow(<LabelOptions {...defaultProps} />);
|
||||
expect(defaultProps.stateParams.categoryAxes[0].labels.filter).toBeTruthy();
|
||||
comp.find({ paramName: FILTER }).prop('setValue')(FILTER, false);
|
||||
|
||||
const newAxes = [{ ...categoryAxis, labels: { ...categoryAxis.labels, filter: false } }];
|
||||
expect(setValue).toBeCalledWith(CATEGORY_AXES, newAxes);
|
||||
expect(setAxisLabel).toBeCalledWith(FILTER, false);
|
||||
});
|
||||
|
||||
it('should set value for valueAxes', () => {
|
||||
defaultProps.axesName = 'valueAxes';
|
||||
const comp = shallow(<LabelOptions {...defaultProps} />);
|
||||
comp.find(TruncateLabelsOption).prop('setValue')('truncate', 10);
|
||||
|
||||
const newAxes = [{ ...valueAxis, labels: { ...valueAxis.labels, truncate: 10 } }];
|
||||
expect(setValue).toBeCalledWith('valueAxes', newAxes);
|
||||
expect(setAxisLabel).toBeCalledWith('truncate', 10);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,33 +23,21 @@ import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
import { VisOptionsProps } from '../../../../../vis_default_editor/public';
|
||||
import { BasicVislibParams, Axis } from '../../../types';
|
||||
import { Axis } from '../../../types';
|
||||
import { SelectOption, SwitchOption, TruncateLabelsOption } from '../../common';
|
||||
import { getRotateOptions } from '../../../utils/collections';
|
||||
|
||||
export interface LabelOptionsProps extends VisOptionsProps<BasicVislibParams> {
|
||||
axis: Axis;
|
||||
axesName: 'categoryAxes' | 'valueAxes';
|
||||
index: number;
|
||||
export type SetAxisLabel = <T extends keyof Axis['labels']>(
|
||||
paramName: T,
|
||||
value: Axis['labels'][T]
|
||||
) => void;
|
||||
export interface LabelOptionsProps {
|
||||
axisLabels: Axis['labels'];
|
||||
axisFilterCheckboxName: string;
|
||||
setAxisLabel: SetAxisLabel;
|
||||
}
|
||||
|
||||
function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOptionsProps) {
|
||||
const setAxisLabel = useCallback(
|
||||
<T extends keyof Axis['labels']>(paramName: T, value: Axis['labels'][T]) => {
|
||||
const axes = [...stateParams[axesName]];
|
||||
axes[index] = {
|
||||
...axes[index],
|
||||
labels: {
|
||||
...axes[index].labels,
|
||||
[paramName]: value,
|
||||
},
|
||||
};
|
||||
setValue(axesName, axes);
|
||||
},
|
||||
[axesName, index, setValue, stateParams]
|
||||
);
|
||||
|
||||
function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: LabelOptionsProps) {
|
||||
const setAxisLabelRotate = useCallback(
|
||||
(paramName: 'rotate', value: Axis['labels']['rotate']) => {
|
||||
setAxisLabel(paramName, Number(value));
|
||||
|
|
@ -77,20 +65,18 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
|
|||
defaultMessage: 'Show labels',
|
||||
})}
|
||||
paramName="show"
|
||||
value={axis.labels.show}
|
||||
value={axisLabels.show}
|
||||
setValue={setAxisLabel}
|
||||
/>
|
||||
|
||||
<SwitchOption
|
||||
data-test-subj={`${axesName === 'valueAxes' ? 'y' : 'x'}AxisFilterLabelsCheckbox-${
|
||||
axis.id
|
||||
}`}
|
||||
disabled={!axis.labels.show}
|
||||
data-test-subj={axisFilterCheckboxName}
|
||||
disabled={!axisLabels.show}
|
||||
label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.filterLabelsLabel', {
|
||||
defaultMessage: 'Filter labels',
|
||||
})}
|
||||
paramName="filter"
|
||||
value={axis.labels.filter}
|
||||
value={axisLabels.filter}
|
||||
setValue={setAxisLabel}
|
||||
/>
|
||||
|
||||
|
|
@ -99,20 +85,20 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
|
|||
<EuiFlexGroup gutterSize="s">
|
||||
<EuiFlexItem>
|
||||
<SelectOption
|
||||
disabled={!axis.labels.show}
|
||||
disabled={!axisLabels.show}
|
||||
label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.alignLabel', {
|
||||
defaultMessage: 'Align',
|
||||
})}
|
||||
options={rotateOptions}
|
||||
paramName="rotate"
|
||||
value={axis.labels.rotate}
|
||||
value={axisLabels.rotate}
|
||||
setValue={setAxisLabelRotate}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<TruncateLabelsOption
|
||||
disabled={!axis.labels.show}
|
||||
value={axis.labels.truncate}
|
||||
disabled={!axisLabels.show}
|
||||
value={axisLabels.truncate}
|
||||
setValue={setAxisLabel}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
|
|
|
|||
|
|
@ -21,14 +21,12 @@ import React from 'react';
|
|||
import { shallow } from 'enzyme';
|
||||
import { LineOptions, LineOptionsParams } from './line_options';
|
||||
import { NumberInputOption } from '../../common';
|
||||
import { getInterpolationModes } from '../../../utils/collections';
|
||||
import { seriesParam } from './mocks';
|
||||
import { seriesParam, vis } from './mocks';
|
||||
|
||||
jest.mock('ui/new_platform');
|
||||
|
||||
const LINE_WIDTH = 'lineWidth';
|
||||
const DRAW_LINES = 'drawLinesBetweenPoints';
|
||||
const interpolationModes = getInterpolationModes();
|
||||
|
||||
describe('LineOptions component', () => {
|
||||
let setChart: jest.Mock;
|
||||
|
|
@ -39,15 +37,9 @@ describe('LineOptions component', () => {
|
|||
|
||||
defaultProps = {
|
||||
chart: { ...seriesParam },
|
||||
vis: {
|
||||
type: {
|
||||
editorConfig: {
|
||||
collections: { interpolationModes },
|
||||
},
|
||||
},
|
||||
},
|
||||
vis,
|
||||
setChart,
|
||||
} as any;
|
||||
};
|
||||
});
|
||||
|
||||
it('should init with the default set of props', () => {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { Vis } from 'src/legacy/core_plugins/visualizations/public';
|
||||
import { Axis, ValueAxis, SeriesParam, Style } from '../../../types';
|
||||
import {
|
||||
ChartTypes,
|
||||
|
|
@ -25,6 +26,10 @@ import {
|
|||
ScaleTypes,
|
||||
Positions,
|
||||
AxisTypes,
|
||||
getScaleTypes,
|
||||
getAxisModes,
|
||||
getPositions,
|
||||
getInterpolationModes,
|
||||
} from '../../../utils/collections';
|
||||
|
||||
const defaultValueAxisId = 'ValueAxis-1';
|
||||
|
|
@ -84,4 +89,17 @@ const seriesParam: SeriesParam = {
|
|||
valueAxis: defaultValueAxisId,
|
||||
};
|
||||
|
||||
export { defaultValueAxisId, categoryAxis, valueAxis, seriesParam };
|
||||
const positions = getPositions();
|
||||
const axisModes = getAxisModes();
|
||||
const scaleTypes = getScaleTypes();
|
||||
const interpolationModes = getInterpolationModes();
|
||||
|
||||
const vis = ({
|
||||
type: {
|
||||
editorConfig: {
|
||||
collections: { scaleTypes, axisModes, positions, interpolationModes },
|
||||
},
|
||||
},
|
||||
} as any) as Vis;
|
||||
|
||||
export { defaultValueAxisId, categoryAxis, valueAxis, seriesParam, vis };
|
||||
|
|
|
|||
|
|
@ -23,19 +23,20 @@ import { EuiPanel, EuiTitle, EuiSpacer, EuiAccordion } from '@elastic/eui';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
import { VisOptionsProps } from '../../../../../vis_default_editor/public';
|
||||
import { BasicVislibParams } from '../../../types';
|
||||
import { Vis } from 'src/legacy/core_plugins/visualizations/public';
|
||||
import { ValueAxis, SeriesParam } from '../../../types';
|
||||
import { ChartOptions } from './chart_options';
|
||||
import { SetParamByIndex, ChangeValueAxis } from './';
|
||||
|
||||
export interface SeriesPanelProps extends VisOptionsProps<BasicVislibParams> {
|
||||
export interface SeriesPanelProps {
|
||||
changeValueAxis: ChangeValueAxis;
|
||||
setParamByIndex: SetParamByIndex;
|
||||
seriesParams: SeriesParam[];
|
||||
valueAxes: ValueAxis[];
|
||||
vis: Vis;
|
||||
}
|
||||
|
||||
function SeriesPanel(props: SeriesPanelProps) {
|
||||
const { stateParams } = props;
|
||||
|
||||
function SeriesPanel({ seriesParams, ...chartProps }: SeriesPanelProps) {
|
||||
return (
|
||||
<EuiPanel paddingSize="s">
|
||||
<EuiTitle size="xs">
|
||||
|
|
@ -48,7 +49,7 @@ function SeriesPanel(props: SeriesPanelProps) {
|
|||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
{stateParams.seriesParams.map((chart, index) => (
|
||||
{seriesParams.map((chart, index) => (
|
||||
<EuiAccordion
|
||||
id={`visEditorSeriesAccordion${chart.data.id}`}
|
||||
key={index}
|
||||
|
|
@ -67,7 +68,7 @@ function SeriesPanel(props: SeriesPanelProps) {
|
|||
<>
|
||||
<EuiSpacer size="m" />
|
||||
|
||||
<ChartOptions index={index} chart={chart} {...props} />
|
||||
<ChartOptions index={index} chart={chart} {...chartProps} />
|
||||
</>
|
||||
</EuiAccordion>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -21,16 +21,12 @@ import React from 'react';
|
|||
import { shallow } from 'enzyme';
|
||||
import { ValueAxesPanel, ValueAxesPanelProps } from './value_axes_panel';
|
||||
import { ValueAxis, SeriesParam } from '../../../types';
|
||||
import { Positions, getScaleTypes, getAxisModes, getPositions } from '../../../utils/collections';
|
||||
import { Positions } from '../../../utils/collections';
|
||||
import { mountWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import { valueAxis, seriesParam } from './mocks';
|
||||
import { valueAxis, seriesParam, vis } from './mocks';
|
||||
|
||||
jest.mock('ui/new_platform');
|
||||
|
||||
const positions = getPositions();
|
||||
const axisModes = getAxisModes();
|
||||
const scaleTypes = getScaleTypes();
|
||||
|
||||
describe('ValueAxesPanel component', () => {
|
||||
let setParamByIndex: jest.Mock;
|
||||
let onValueAxisPositionChanged: jest.Mock;
|
||||
|
|
@ -66,24 +62,16 @@ describe('ValueAxesPanel component', () => {
|
|||
};
|
||||
|
||||
defaultProps = {
|
||||
stateParams: {
|
||||
seriesParams: [seriesParamCount, seriesParamAverage],
|
||||
valueAxes: [axisLeft, axisRight],
|
||||
},
|
||||
vis: {
|
||||
type: {
|
||||
editorConfig: {
|
||||
collections: { scaleTypes, axisModes, positions },
|
||||
},
|
||||
},
|
||||
},
|
||||
seriesParams: [seriesParamCount, seriesParamAverage],
|
||||
valueAxes: [axisLeft, axisRight],
|
||||
vis,
|
||||
isCategoryAxisHorizontal: false,
|
||||
setParamByIndex,
|
||||
onValueAxisPositionChanged,
|
||||
addValueAxis,
|
||||
removeValueAxis,
|
||||
setMultipleValidity,
|
||||
} as any;
|
||||
};
|
||||
});
|
||||
|
||||
it('should init with the default set of props', () => {
|
||||
|
|
@ -93,7 +81,7 @@ describe('ValueAxesPanel component', () => {
|
|||
});
|
||||
|
||||
it('should not allow to remove the last value axis', () => {
|
||||
defaultProps.stateParams.valueAxes = [axisLeft];
|
||||
defaultProps.valueAxes = [axisLeft];
|
||||
const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
|
||||
expect(comp.find('[data-test-subj="removeValueAxisBtn"] button').exists()).toBeFalsy();
|
||||
});
|
||||
|
|
@ -133,7 +121,7 @@ describe('ValueAxesPanel component', () => {
|
|||
});
|
||||
|
||||
it('should show when multiple series match value axis', () => {
|
||||
defaultProps.stateParams.seriesParams[1].valueAxis = 'ValueAxis-1';
|
||||
defaultProps.seriesParams[1].valueAxis = 'ValueAxis-1';
|
||||
const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
|
||||
expect(
|
||||
comp
|
||||
|
|
@ -144,7 +132,7 @@ describe('ValueAxesPanel component', () => {
|
|||
});
|
||||
|
||||
it('should not show when no series match value axis', () => {
|
||||
defaultProps.stateParams.seriesParams[0].valueAxis = 'ValueAxis-2';
|
||||
defaultProps.seriesParams[0].valueAxis = 'ValueAxis-2';
|
||||
const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
|
||||
expect(
|
||||
comp
|
||||
|
|
|
|||
|
|
@ -31,31 +31,35 @@ import {
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
import { BasicVislibParams, ValueAxis } from '../../../types';
|
||||
import { Vis } from 'src/legacy/core_plugins/visualizations/public';
|
||||
import { SeriesParam, ValueAxis } from '../../../types';
|
||||
import { ValueAxisOptions } from './value_axis_options';
|
||||
import { SetParamByIndex } from './';
|
||||
import { ValidationVisOptionsProps } from '../../common';
|
||||
|
||||
export interface ValueAxesPanelProps extends ValidationVisOptionsProps<BasicVislibParams> {
|
||||
export interface ValueAxesPanelProps {
|
||||
isCategoryAxisHorizontal: boolean;
|
||||
addValueAxis: () => ValueAxis;
|
||||
removeValueAxis: (axis: ValueAxis) => void;
|
||||
onValueAxisPositionChanged: (index: number, value: ValueAxis['position']) => void;
|
||||
setParamByIndex: SetParamByIndex;
|
||||
seriesParams: SeriesParam[];
|
||||
valueAxes: ValueAxis[];
|
||||
vis: Vis;
|
||||
setMultipleValidity: (paramName: string, isValid: boolean) => void;
|
||||
}
|
||||
|
||||
function ValueAxesPanel(props: ValueAxesPanelProps) {
|
||||
const { stateParams, addValueAxis, removeValueAxis } = props;
|
||||
const { addValueAxis, removeValueAxis, seriesParams, valueAxes } = props;
|
||||
|
||||
const getSeries = useCallback(
|
||||
(axis: ValueAxis) => {
|
||||
const isFirst = stateParams.valueAxes[0].id === axis.id;
|
||||
const series = stateParams.seriesParams.filter(
|
||||
const isFirst = valueAxes[0].id === axis.id;
|
||||
const series = seriesParams.filter(
|
||||
serie => serie.valueAxis === axis.id || (isFirst && !serie.valueAxis)
|
||||
);
|
||||
return series.map(serie => serie.data.label).join(', ');
|
||||
},
|
||||
[stateParams.valueAxes, stateParams.seriesParams]
|
||||
[seriesParams, valueAxes]
|
||||
);
|
||||
|
||||
const removeButtonTooltip = useMemo(
|
||||
|
|
@ -131,7 +135,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
|
|||
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
{stateParams.valueAxes.map((axis, index) => (
|
||||
{valueAxes.map((axis, index) => (
|
||||
<EuiAccordion
|
||||
id={`yAxisAccordion${axis.id}`}
|
||||
key={axis.id}
|
||||
|
|
@ -148,11 +152,20 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
|
|||
values: { axisName: axis.name },
|
||||
}
|
||||
)}
|
||||
extraAction={stateParams.valueAxes.length === 1 ? undefined : renderRemoveButton(axis)}
|
||||
extraAction={valueAxes.length === 1 ? undefined : renderRemoveButton(axis)}
|
||||
>
|
||||
<>
|
||||
<EuiSpacer size="m" />
|
||||
<ValueAxisOptions axis={axis} index={index} {...props} />
|
||||
<ValueAxisOptions
|
||||
axis={axis}
|
||||
index={index}
|
||||
valueAxis={valueAxes[index]}
|
||||
isCategoryAxisHorizontal={props.isCategoryAxisHorizontal}
|
||||
onValueAxisPositionChanged={props.onValueAxisPositionChanged}
|
||||
setParamByIndex={props.setParamByIndex}
|
||||
setMultipleValidity={props.setMultipleValidity}
|
||||
vis={props.vis}
|
||||
/>
|
||||
</>
|
||||
</EuiAccordion>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -20,24 +20,15 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
|
||||
import { Axis } from '../../../types';
|
||||
import { ValueAxis } from '../../../types';
|
||||
import { TextInputOption } from '../../common';
|
||||
import { LabelOptions } from './label_options';
|
||||
import {
|
||||
ScaleTypes,
|
||||
Positions,
|
||||
getScaleTypes,
|
||||
getAxisModes,
|
||||
getPositions,
|
||||
} from '../../../utils/collections';
|
||||
import { valueAxis, categoryAxis } from './mocks';
|
||||
import { ScaleTypes, Positions } from '../../../utils/collections';
|
||||
import { valueAxis, vis } from './mocks';
|
||||
|
||||
jest.mock('ui/new_platform');
|
||||
|
||||
const POSITION = 'position';
|
||||
const positions = getPositions();
|
||||
const axisModes = getAxisModes();
|
||||
const scaleTypes = getScaleTypes();
|
||||
|
||||
interface PositionOption {
|
||||
text: string;
|
||||
|
|
@ -50,7 +41,7 @@ describe('ValueAxisOptions component', () => {
|
|||
let onValueAxisPositionChanged: jest.Mock;
|
||||
let setMultipleValidity: jest.Mock;
|
||||
let defaultProps: ValueAxisOptionsParams;
|
||||
let axis: Axis;
|
||||
let axis: ValueAxis;
|
||||
|
||||
beforeEach(() => {
|
||||
setParamByIndex = jest.fn();
|
||||
|
|
@ -61,22 +52,13 @@ describe('ValueAxisOptions component', () => {
|
|||
defaultProps = {
|
||||
axis,
|
||||
index: 0,
|
||||
stateParams: {
|
||||
categoryAxes: [{ ...categoryAxis }],
|
||||
valueAxes: [axis],
|
||||
},
|
||||
vis: {
|
||||
type: {
|
||||
editorConfig: {
|
||||
collections: { scaleTypes, axisModes, positions },
|
||||
},
|
||||
},
|
||||
},
|
||||
valueAxis,
|
||||
vis,
|
||||
isCategoryAxisHorizontal: false,
|
||||
setParamByIndex,
|
||||
onValueAxisPositionChanged,
|
||||
setMultipleValidity,
|
||||
} as any;
|
||||
};
|
||||
});
|
||||
|
||||
it('should init with the default set of props', () => {
|
||||
|
|
|
|||
|
|
@ -21,15 +21,11 @@ import React, { useCallback, useMemo } from 'react';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiSpacer, EuiAccordion, EuiHorizontalRule } from '@elastic/eui';
|
||||
|
||||
import { BasicVislibParams, ValueAxis } from '../../../types';
|
||||
import { Vis } from 'src/legacy/core_plugins/visualizations/public';
|
||||
import { ValueAxis } from '../../../types';
|
||||
import { Positions } from '../../../utils/collections';
|
||||
import {
|
||||
SelectOption,
|
||||
SwitchOption,
|
||||
TextInputOption,
|
||||
ValidationVisOptionsProps,
|
||||
} from '../../common';
|
||||
import { LabelOptions } from './label_options';
|
||||
import { SelectOption, SwitchOption, TextInputOption } from '../../common';
|
||||
import { LabelOptions, SetAxisLabel } from './label_options';
|
||||
import { CustomExtentsOptions } from './custom_extents_options';
|
||||
import { isAxisHorizontal } from './utils';
|
||||
import { SetParamByIndex } from './';
|
||||
|
|
@ -39,25 +35,27 @@ export type SetScale = <T extends keyof ValueAxis['scale']>(
|
|||
value: ValueAxis['scale'][T]
|
||||
) => void;
|
||||
|
||||
export interface ValueAxisOptionsParams extends ValidationVisOptionsProps<BasicVislibParams> {
|
||||
export interface ValueAxisOptionsParams {
|
||||
axis: ValueAxis;
|
||||
index: number;
|
||||
isCategoryAxisHorizontal: boolean;
|
||||
onValueAxisPositionChanged: (index: number, value: ValueAxis['position']) => void;
|
||||
setParamByIndex: SetParamByIndex;
|
||||
valueAxis: ValueAxis;
|
||||
vis: Vis;
|
||||
setMultipleValidity: (paramName: string, isValid: boolean) => void;
|
||||
}
|
||||
|
||||
function ValueAxisOptions(props: ValueAxisOptionsParams) {
|
||||
const {
|
||||
axis,
|
||||
index,
|
||||
isCategoryAxisHorizontal,
|
||||
stateParams,
|
||||
vis,
|
||||
onValueAxisPositionChanged,
|
||||
setParamByIndex,
|
||||
} = props;
|
||||
|
||||
function ValueAxisOptions({
|
||||
axis,
|
||||
index,
|
||||
isCategoryAxisHorizontal,
|
||||
valueAxis,
|
||||
vis,
|
||||
onValueAxisPositionChanged,
|
||||
setParamByIndex,
|
||||
setMultipleValidity,
|
||||
}: ValueAxisOptionsParams) {
|
||||
const setValueAxis = useCallback(
|
||||
<T extends keyof ValueAxis>(paramName: T, value: ValueAxis[T]) =>
|
||||
setParamByIndex('valueAxes', index, paramName, value),
|
||||
|
|
@ -67,25 +65,37 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
|
|||
const setValueAxisTitle = useCallback(
|
||||
<T extends keyof ValueAxis['title']>(paramName: T, value: ValueAxis['title'][T]) => {
|
||||
const title = {
|
||||
...stateParams.valueAxes[index].title,
|
||||
...valueAxis.title,
|
||||
[paramName]: value,
|
||||
};
|
||||
|
||||
setParamByIndex('valueAxes', index, 'title', title);
|
||||
},
|
||||
[setParamByIndex, index, stateParams.valueAxes]
|
||||
[valueAxis.title, setParamByIndex, index]
|
||||
);
|
||||
|
||||
const setValueAxisScale: SetScale = useCallback(
|
||||
(paramName, value) => {
|
||||
const scale = {
|
||||
...stateParams.valueAxes[index].scale,
|
||||
...valueAxis.scale,
|
||||
[paramName]: value,
|
||||
};
|
||||
|
||||
setParamByIndex('valueAxes', index, 'scale', scale);
|
||||
},
|
||||
[setParamByIndex, index, stateParams.valueAxes]
|
||||
[valueAxis.scale, setParamByIndex, index]
|
||||
);
|
||||
|
||||
const setAxisLabel: SetAxisLabel = useCallback(
|
||||
(paramName, value) => {
|
||||
const labels = {
|
||||
...valueAxis.labels,
|
||||
[paramName]: value,
|
||||
};
|
||||
|
||||
setParamByIndex('valueAxes', index, 'labels', labels);
|
||||
},
|
||||
[valueAxis.labels, setParamByIndex, index]
|
||||
);
|
||||
|
||||
const onPositionChanged = useCallback(
|
||||
|
|
@ -175,7 +185,11 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
|
|||
setValue={setValueAxisTitle}
|
||||
/>
|
||||
|
||||
<LabelOptions axesName="valueAxes" {...props} />
|
||||
<LabelOptions
|
||||
axisLabels={axis.labels}
|
||||
axisFilterCheckboxName={`yAxisFilterLabelsCheckbox${axis.id}`}
|
||||
setAxisLabel={setAxisLabel}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<EuiSpacer size="xs" />
|
||||
|
|
@ -204,9 +218,10 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
|
|||
<>
|
||||
<EuiSpacer size="m" />
|
||||
<CustomExtentsOptions
|
||||
axisScale={axis.scale}
|
||||
setMultipleValidity={setMultipleValidity}
|
||||
setValueAxisScale={setValueAxisScale}
|
||||
setValueAxis={setValueAxis}
|
||||
{...props}
|
||||
/>
|
||||
</>
|
||||
</EuiAccordion>
|
||||
|
|
|
|||
Loading…
Reference in a new issue