Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace flot with elastic-chart in Timelion #81565

Merged
merged 75 commits into from
Aug 2, 2021
Merged
Changes from 1 commit
Commits
Show all changes
75 commits
Select commit Hold shift + click to select a range
ff810c8
First draft migrate timelion to elastic-charts
VladLasitsa Oct 23, 2020
6d7f157
Some refactoring. Added brush event.
VladLasitsa Oct 23, 2020
b888e79
Merge remote-tracking branch 'origin/#79984' into #79984
VladLasitsa Oct 26, 2020
999c2d7
Added title. Some refactoring
VladLasitsa Oct 27, 2020
f43a965
Fixed some type problems. Added logic for yaxes function
VladLasitsa Oct 29, 2020
af60792
Fixed some types, added missing functionality for yaxes
VladLasitsa Oct 30, 2020
f429afe
Fixed some types, added missing functionality for stack property
VladLasitsa Nov 2, 2020
c94a3fc
Merge branch 'master' into #79984
kibanamachine Nov 3, 2020
5cd3a48
Fixed unit test
VladLasitsa Nov 3, 2020
4b3a294
Removed unneeded code
VladLasitsa Nov 3, 2020
1e7eee7
Some refactoring
VladLasitsa Nov 4, 2020
901f8c7
Some refactoring
VladLasitsa Nov 5, 2020
5942f9b
Merge branch 'master' into #79984
kibanamachine Nov 6, 2020
60c1e11
Fixed some remarks.
VladLasitsa Nov 6, 2020
4f8c59a
Fixed some styles
VladLasitsa Nov 6, 2020
9be84d7
Added themes. Removed unneeded styles in BarSeries
VladLasitsa Nov 9, 2020
6711dac
removed unneeded code.
VladLasitsa Nov 12, 2020
6d74017
Fixed some comments
VladLasitsa Nov 16, 2020
039d3b4
Merge remote-tracking branch 'upstream/master' into #79984
VladLasitsa Nov 16, 2020
de41259
Fixed vertical cursor across Timelion visualizations of a dashboad
VladLasitsa Nov 16, 2020
63a12db
Fix some problems with styles
VladLasitsa Nov 17, 2020
2726c0c
Merge remote-tracking branch 'upstream/master' into #79984
VladLasitsa Nov 17, 2020
07181ae
Merge remote-tracking branch 'upstream/master' into #79984
VladLasitsa Nov 19, 2020
ca9aeac
Use RxJS instead of jQuery
VladLasitsa Nov 19, 2020
13033c5
Remove unneeded code
VladLasitsa Nov 24, 2020
703e3f3
Merge remote-tracking branch 'upstream/master' into #79984
VladLasitsa Nov 24, 2020
18d9c37
Fixed some problems
VladLasitsa Nov 25, 2020
53b1c08
Fixed unit test
VladLasitsa Nov 26, 2020
6c8b842
Merge branch 'master' into #79984
kibanamachine Jan 29, 2021
c2ba661
Merge branch 'master' into #79984
VladLasitsa Feb 1, 2021
aac4b77
Fix CI
VladLasitsa Feb 1, 2021
75fb061
Merge branch 'master' into #79984
kibanamachine Feb 4, 2021
24a188a
Fix eslint
VladLasitsa Feb 4, 2021
7ad545f
Merge branch 'master' into #79984
kibanamachine May 12, 2021
d369fc4
Fix some gaps
VladLasitsa May 12, 2021
035516a
Merge branch 'master' into #79984
kibanamachine May 31, 2021
15b6ec7
Fix legend columns
VladLasitsa May 31, 2021
b079e0d
Merge branch 'master' into #79984
kibanamachine Jun 7, 2021
9944016
Some fixes
VladLasitsa Jun 8, 2021
010617c
add 2 versions of Timeline app
alexwizp Jun 9, 2021
bc63434
fix CI
alexwizp Jun 9, 2021
81add31
cleanup code
alexwizp Jun 9, 2021
0bc12e1
fix CI
alexwizp Jun 11, 2021
6f33935
fix legend position
alexwizp Jun 11, 2021
56c0760
fix some cases
alexwizp Jun 11, 2021
f52fd07
fix some cases
alexwizp Jun 14, 2021
cd2cb7e
remove extra casting
alexwizp Jun 14, 2021
e4c3b96
cleanup code
alexwizp Jun 15, 2021
451054c
fix issue with static
alexwizp Jun 15, 2021
1898b8d
fix header formatter
alexwizp Jun 15, 2021
a1edcf5
fix points
alexwizp Jun 15, 2021
641ffab
Merge remote-tracking branch 'upstream/master' into #79984
alexwizp Jun 15, 2021
d330823
fix ts error
alexwizp Jun 16, 2021
f087902
Fix yaxis behavior
VladLasitsa Jun 16, 2021
e4397bb
Merge branch 'master' into #79984
kibanamachine Jun 16, 2021
9af9dcb
Fix some case with yaxis
VladLasitsa Jun 16, 2021
0ca56a1
Merge remote-tracking branch 'upstream/master' into #79984
alexwizp Jun 18, 2021
a84fa78
Merge branch 'master' into #79984
kibanamachine Jun 21, 2021
7ca06e1
Merge branch 'master' into #79984
kibanamachine Jun 21, 2021
022b8a5
Merge branch 'master' into #79984
kibanamachine Jun 22, 2021
0eb286f
Add deprecation message and update asciidoc
VladLasitsa Jun 22, 2021
574d045
Merge branch 'master' into #79984
kibanamachine Jun 24, 2021
572df6e
Fix title
VladLasitsa Jun 28, 2021
b027add
Merge branch 'master' into #79984
kibanamachine Jun 28, 2021
edab9a6
Merge branch 'master' into #79984
kibanamachine Jun 30, 2021
5082a31
Merge branch 'master' into #79984
kibanamachine Jul 1, 2021
8dd67ff
Merge branch 'master' into #79984
kibanamachine Jul 5, 2021
33c9b70
Merge branch 'master' into #79984
kibanamachine Jul 6, 2021
4d5292b
Merge branch 'master' into #79984
kibanamachine Jul 13, 2021
eac6a41
Merge branch 'master' into #79984
kibanamachine Jul 14, 2021
757e95a
Merge branch 'master' into #79984
kibanamachine Jul 20, 2021
56a94b4
Merge branch 'master' into #79984
kibanamachine Jul 27, 2021
c95ef4b
Merge remote-tracking branch 'upstream/master' into #79984
VladLasitsa Jul 29, 2021
bf63108
some text improvements
VladLasitsa Jul 29, 2021
acb6bce
Merge branch 'master' into #79984
kibanamachine Aug 2, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Some fixes
  • Loading branch information
VladLasitsa committed Jun 8, 2021
commit 9944016b41d2648217ba5f792f3456cf403c7834
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ export function AreaSeriesComponent({ data, index }: { data: any; index: number
areaSeriesStyle: {
line: {
stroke: data.color,
strokeWidth: Number(lines.lineWidth) || 3,
strokeWidth: Number(lines.lineWidth) ?? 3,
visible: lines.show ?? !points.show,
},
area: {
@@ -27,11 +27,11 @@ export function AreaSeriesComponent({ data, index }: { data: any; index: number
point: {
fill: points.fillColor,
opacity: points.fill * 10 ?? 10,
radius: points.radius || 3,
radius: points.radius ?? 3,
stroke: data.color,
strokeWidth: points.lineWidth || 2,
strokeWidth: points.lineWidth ?? 2,
visible: points.show ?? false,
shape: points.symbol,
shape: points.symbol === 'cross' ? 'x' : points.symbol,
},
},
curve: lines.steps ? CurveType.CURVE_STEP : CurveType.LINEAR,
Original file line number Diff line number Diff line change
@@ -11,11 +11,21 @@ import { BarSeries, ScaleType } from '@elastic/charts';

export function BarSeriesComponent({ data, index }: { data: any; index: number }) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same question, as before.

const bars = data.bars || {};
let opacity = bars.fill;

if (!bars.fill) {
opacity = 1;
} else if (bars.fill < 0) {
opacity = 0;
} else if (bars.fill > 1) {
opacity = 1;
}

const styles = {
barSeriesStyle: {
rect: {
fill: data.color,
opacity: !bars.fill || bars.fill < 0 ? 1 : bars.fill,
opacity,
widthPixel: bars.lineWidth,
},
},
Original file line number Diff line number Diff line change
@@ -60,21 +60,25 @@ function TimelionVisComponent({

const updateYAxes = function (yaxes: IAxis[]) {
yaxes.forEach((yaxis: IAxis) => {
if (yaxis.units) {
const formatters = tickFormatters(yaxis);
yaxis.tickFormatter = formatters[yaxis.units.type as keyof typeof formatters];
} else if (yaxis.tickDecimals) {
yaxis.tickFormatter = (val: number) => val.toFixed(yaxis.tickDecimals);
}
if (yaxis) {
if (yaxis.units) {
const formatters = tickFormatters(yaxis);
yaxis.tickFormatter = formatters[yaxis.units.type as keyof typeof formatters];
} else if (yaxis.tickDecimals) {
yaxis.tickFormatter = (val: number) => val.toFixed(yaxis.tickDecimals);
}

yaxis.domain = {
fit: true,
};

yaxis.domain = {};
if (yaxis.max) {
yaxis.domain.max = yaxis.max;
}

if (yaxis.max) {
yaxis.domain.max = yaxis.max;
}

if (yaxis.min) {
yaxis.domain.min = yaxis.min;
if (yaxis.min) {
yaxis.domain.min = yaxis.min;
}
}
});
};
@@ -126,23 +130,27 @@ function TimelionVisComponent({
floating: true,
floatingColumns: chartLegendGlobal?.noColumns ?? 1,
vAlign: Position.Top,
hAlign: Position.Right,
hAlign: Position.Left,
direction: LayoutDirection.Vertical,
};

switch (chartLegendGlobal?.position) {
case 'ne':
legendPositionConf.vAlign = Position.Top;
legendPositionConf.hAlign = Position.Right;
break;
case 'nw':
legendPositionConf.vAlign = Position.Top;
legendPositionConf.hAlign = Position.Left;
break;
case 'se':
legendPositionConf.vAlign = Position.Bottom;
legendPositionConf.hAlign = Position.Right;
break;
case 'sw':
legendPositionConf.vAlign = Position.Bottom;
legendPositionConf.hAlign = Position.Left;
break;
}

return legendPositionConf;
@@ -192,6 +200,18 @@ function TimelionVisComponent({
[interval, kibana.services.timefilter, kibana.services.uiSettings]
);

const yaxes = useMemo(() => {
const collectedYAxes = [];
chart.forEach((chartInst) => {
chartInst._global?.yaxes.forEach((yaxis) => {
if (yaxis) {
collectedYAxes.push(yaxis);
}
});
});
return collectedYAxes;
}, [chart]);

return (
<div className="timelionChart">
<div className="timelionChart__topTitle">{title}</div>
@@ -211,40 +231,29 @@ function TimelionVisComponent({
externalPointerEvents={{ tooltip: { visible: false } }}
/>
<Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={tickFormat} />
{chart[0]._global?.yaxes ? (
chart[0]._global.yaxes.map((axis: IAxis, index: number) => {
{yaxes.length ? (
yaxes.map((axis: IAxis, index: number) => {
return (
<Axis
key={index}
id={axis.position + axis.axisLabel}
title={axis.axisLabel}
position={axis.position}
tickFormat={axis.tickFormatter}
gridLine={{
stroke: GRID_LINE_STROKE,
visible: true,
}}
domain={axis.domain as YDomainRange}
/>
);
})
) : (
<Axis
id="left"
position={Position.Left}
gridLine={{
stroke: GRID_LINE_STROKE,
visible: true,
}}
/>
<Axis id="left" position={Position.Left} />
)}
{chart.map((data, index) => {
const key = `${index}-${data.label}`;
if (data.bars) {
return <BarSeriesComponent key={key} data={data} index={index} />;
} else {
return <AreaSeriesComponent key={key} data={data} index={index} />;
}

return <AreaSeriesComponent key={key} data={data} index={index} />;
})}
</Chart>
</div>