Skip to content

Commit

Permalink
fix: update ZoomBar to match new data format
Browse files Browse the repository at this point in the history 
- fix trailing-comma
- update scales-cartesian.getValueFromScale()
- update line time-series 15 seconds demo data
  • Loading branch information
@hlyang397
hlyang397 committed Jun 2, 2020
1 parent 68e8446 commit d425327
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 101 deletions.
12 changes: 6 additions & 6 deletions packages/core/demo/data/time-series-axis.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ export const lineTimeSeriesData15seconds = {
label: "Dataset 1",
data: [
{ date: new Date(2020, 11, 10, 23, 59, 15), value: 10 },
{ date: new Date(2020, 11, 10, 23, 59, 30), value: 10 },
{ date: new Date(2020, 11, 10, 23, 59, 45), value: 10 },
{ date: new Date(2020, 11, 11, 0, 0, 0), value: 10 },
{ date: new Date(2020, 11, 11, 0, 0, 15), value: 10 },
{ date: new Date(2020, 11, 11, 0, 0, 30), value: 10 },
{ date: new Date(2020, 11, 11, 0, 0, 45), value: 10 },
{ date: new Date(2020, 11, 10, 23, 59, 30), value: 15 },
{ date: new Date(2020, 11, 10, 23, 59, 45), value: 7 },
{ date: new Date(2020, 11, 11, 0, 0, 0), value: 2 },
{ date: new Date(2020, 11, 11, 0, 0, 15), value: 9 },
{ date: new Date(2020, 11, 11, 0, 0, 30), value: 13 },
{ date: new Date(2020, 11, 11, 0, 0, 45), value: 8 },
],
},
],
Expand Down
16 changes: 8 additions & 8 deletions packages/core/src/axis-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
Tooltip,
TooltipBar,
Spacer,
ZoomBar
ZoomBar,
} from "./components/index";
import { Tools } from "./tools";

Expand Down Expand Up @@ -68,7 +68,7 @@ export class AxisChart extends Chart {
const legendPosition = Tools.getProperty(
this.model.getOptions(),
"legend",
"position"
"position",
);
if (legendPosition === LegendPositions.LEFT) {
fullFrameComponentDirection = LayoutDirection.ROW;
Expand Down Expand Up @@ -111,7 +111,7 @@ export class AxisChart extends Chart {
],
{
direction: fullFrameComponentDirection,
}
},
),
],
growth: {
Expand All @@ -123,12 +123,12 @@ export class AxisChart extends Chart {
const zoomBarComponent = {
id: "zoom-bar",
components: [
new ZoomBar(this.model, this.services)
new ZoomBar(this.model, this.services),
],
growth: {
x: LayoutGrowth.PREFERRED,
y: LayoutGrowth.FIXED
}
y: LayoutGrowth.FIXED,
},
};

// Add chart title if it exists
Expand All @@ -142,7 +142,7 @@ export class AxisChart extends Chart {
growth: {
x: LayoutGrowth.PREFERRED,
y: LayoutGrowth.FIXED,
}
},
};

topLevelLayoutComponents.push(titleSpacerComponent);
Expand All @@ -158,7 +158,7 @@ export class AxisChart extends Chart {
topLevelLayoutComponents,
{
direction: LayoutDirection.COLUMN,
}
},
),
];
}
Expand Down
191 changes: 104 additions & 87 deletions packages/core/src/services/scales-cartesian.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export class CartesianScales extends Service {
this.findDomainAndRangeAxes();
this.determineOrientation();
const axisPositions = Object.keys(AxisPositions).map(
(axisPositionKey) => AxisPositions[axisPositionKey]
(axisPositionKey) => AxisPositions[axisPositionKey],
);
axisPositions.forEach((axisPosition) => {
this.scales[axisPosition] = this.createScale(axisPosition);
Expand All @@ -84,7 +84,7 @@ export class CartesianScales extends Service {
// Now we have horizontal & vertical main axes to choose domain & range axes from
const domainAndRangeAxesPositions = this.findDomainAndRangeAxesPositions(
mainVerticalAxisPosition,
mainHorizontalAxisPosition
mainHorizontalAxisPosition,
);

this.domainAxisPosition =
Expand Down Expand Up @@ -133,7 +133,7 @@ export class CartesianScales extends Service {
];

return [this.domainAxisPosition, this.rangeAxisPosition].find(
(position) => possibleXAxisPositions.indexOf(position) > -1
(position) => possibleXAxisPositions.indexOf(position) > -1,
);
}

Expand All @@ -145,7 +145,7 @@ export class CartesianScales extends Service {
];

return [this.domainAxisPosition, this.rangeAxisPosition].find(
(position) => possibleYAxisPositions.indexOf(position) > -1
(position) => possibleYAxisPositions.indexOf(position) > -1,
);
}

Expand All @@ -157,41 +157,58 @@ export class CartesianScales extends Service {
return this.scales[this.getMainYAxisPosition()];
}

getValueFromScale(axisPosition: AxisPositions, datum: any, index?: number) {
getValueFromScale(scale: any, scaleType: ScaleTypes, axisPosition: AxisPositions, datum: any, index?: number) {
const options = this.model.getOptions();
const axisOptions = Tools.getProperty(options, "axes", axisPosition);

const scaleType = this.scaleTypes[axisPosition];
const scale = this.scales[axisPosition];

const axesOptions = Tools.getProperty(options, "axes");
const axisOptions = axesOptions[axisPosition];
const { mapsTo } = axisOptions;
const value = datum[mapsTo] !== undefined ? datum[mapsTo] : datum;

if (scaleType === ScaleTypes.LABELS) {
return scale(value) + scale.step() / 2;
let scaledValue;
switch (scaleType) {
case ScaleTypes.LABELS:
scaledValue = scale(value) + scale.step() / 2;
break;
case ScaleTypes.TIME:
scaledValue = scale(new Date(value));
break;
default:
scaledValue = scale(value);
}
return scaledValue;
}

if (scaleType === ScaleTypes.TIME) {
return scale(new Date(value));
}
getValueThroughAxisPosition(axisPosition: AxisPositions, datum: any, index?: number) {
const scaleType = this.scaleTypes[axisPosition];
const scale = this.scales[axisPosition];

return scale(value);
return this.getValueFromScale(scale, scaleType, axisPosition, datum, index);
}


getDomainValue(d, i) {
return this.getValueFromScale(this.domainAxisPosition, d, i);
return this.getValueThroughAxisPosition(this.domainAxisPosition, d, i);
}

getRangeValue(d, i) {
return this.getValueFromScale(this.rangeAxisPosition, d, i);
return this.getValueThroughAxisPosition(this.rangeAxisPosition, d, i);
}

getXValue(d, i) {
const mainXAxisPosition = this.getMainXAxisPosition();
return this.getValueThroughAxisPosition(mainXAxisPosition, d, i);
}

getYValue(d, i) {
const mainYAxisPosition = this.getMainYAxisPosition();
return this.getValueThroughAxisPosition(mainYAxisPosition, d, i);
}

getDomainIdentifier() {
const options = this.model.getOptions();
const axisOptions = Tools.getProperty(
options,
"axes",
this.domainAxisPosition
this.domainAxisPosition,
);

return axisOptions.mapsTo;
Expand All @@ -202,7 +219,7 @@ export class CartesianScales extends Service {
const axisOptions = Tools.getProperty(
options,
"axes",
this.rangeAxisPosition
this.rangeAxisPosition,
);

return axisOptions.mapsTo;
Expand Down Expand Up @@ -236,17 +253,76 @@ export class CartesianScales extends Service {
const spaceToAddToEdges = Tools.getProperty(
options,
"timeScale",
"addSpaceOnEdges"
"addSpaceOnEdges",
);
return addSpacingToTimeDomain(domain, spaceToAddToEdges);
} else {
return addSpacingToContinuousDomain(
domain,
Configuration.axis.paddingRatio
Configuration.axis.paddingRatio,
);
}
}

getHighestDomainThreshold(): null | {
threshold: ThresholdOptions;
scaleValue: number;
} {
const axesOptions = Tools.getProperty(this.model.getOptions(), "axes");
const domainAxisPosition = this.getDomainAxisPosition();

const { thresholds } = axesOptions[domainAxisPosition];

if (!thresholds) {
return null;
}

const domainScale = this.getDomainScale();
// Find the highest threshold for the domain
const highestThreshold = thresholds.sort(
(a, b) => b.value - a.value,
)[0];

const scaleType = this.getScaleTypeByPosition(domainAxisPosition);
if (
scaleType === ScaleTypes.TIME &&
(typeof highestThreshold.value === "string" ||
highestThreshold.value.getTime === undefined)
) {
highestThreshold.value = new Date(highestThreshold.value);
}

return {
threshold: highestThreshold,
scaleValue: domainScale(highestThreshold.value),
};
}

getHighestRangeThreshold(): null | {
threshold: ThresholdOptions;
scaleValue: number;
} {
const axesOptions = Tools.getProperty(this.model.getOptions(), "axes");
const rangeAxisPosition = this.getRangeAxisPosition();

const { thresholds } = axesOptions[rangeAxisPosition];

if (!thresholds) {
return null;
}

const rangeScale = this.getRangeScale();
// Find the highest threshold for the range
const highestThreshold = thresholds.sort(
(a, b) => b.value - a.value,
)[0];

return {
threshold: highestThreshold,
scaleValue: rangeScale(highestThreshold.value),
};
}

protected findMainVerticalAxisPosition() {
const options = this.model.getOptions();
const axesOptions = Tools.getProperty(options, "axes");
Expand Down Expand Up @@ -281,19 +357,19 @@ export class CartesianScales extends Service {

protected findDomainAndRangeAxesPositions(
mainVerticalAxisPosition: AxisPositions,
mainHorizontalAxisPosition: AxisPositions
mainHorizontalAxisPosition: AxisPositions,
) {
const options = this.model.getOptions();

const mainVerticalAxisOptions = Tools.getProperty(
options,
"axes",
mainVerticalAxisPosition
mainVerticalAxisPosition,
);
const mainHorizontalAxisOptions = Tools.getProperty(
options,
"axes",
mainHorizontalAxisPosition
mainHorizontalAxisPosition,
);

const mainVerticalScaleType =
Expand Down Expand Up @@ -363,7 +439,7 @@ export class CartesianScales extends Service {
if (axisOptions.stacked) {
const dataValuesGroupedByKeys = this.model.getDataValuesGroupedByKeys();
allDataValues = dataValuesGroupedByKeys.map((dataValues) =>
sum(values(dataValues) as any)
sum(values(dataValues) as any),
);
} else {
allDataValues = displayData.map((datum) => datum[mapsTo]);
Expand Down Expand Up @@ -406,65 +482,6 @@ export class CartesianScales extends Service {

return scale;
}

getHighestDomainThreshold(): null | {
threshold: ThresholdOptions;
scaleValue: number;
} {
const axesOptions = Tools.getProperty(this.model.getOptions(), "axes");
const domainAxisPosition = this.getDomainAxisPosition();

const { thresholds } = axesOptions[domainAxisPosition];

if (!thresholds) {
return null;
}

const domainScale = this.getDomainScale();
// Find the highest threshold for the domain
const highestThreshold = thresholds.sort(
(a, b) => b.value - a.value
)[0];

const scaleType = this.getScaleTypeByPosition(domainAxisPosition);
if (
scaleType === ScaleTypes.TIME &&
(typeof highestThreshold.value === "string" ||
highestThreshold.value.getTime === undefined)
) {
highestThreshold.value = new Date(highestThreshold.value);
}

return {
threshold: highestThreshold,
scaleValue: domainScale(highestThreshold.value),
};
}

getHighestRangeThreshold(): null | {
threshold: ThresholdOptions;
scaleValue: number;
} {
const axesOptions = Tools.getProperty(this.model.getOptions(), "axes");
const rangeAxisPosition = this.getRangeAxisPosition();

const { thresholds } = axesOptions[rangeAxisPosition];

if (!thresholds) {
return null;
}

const rangeScale = this.getRangeScale();
// Find the highest threshold for the range
const highestThreshold = thresholds.sort(
(a, b) => b.value - a.value
)[0];

return {
threshold: highestThreshold,
scaleValue: rangeScale(highestThreshold.value),
};
}
}

function addSpacingToTimeDomain(domain: any, spaceToAddToEdges: number) {
Expand Down Expand Up @@ -532,7 +549,7 @@ function addSpacingToTimeDomain(domain: any, spaceToAddToEdges: number) {

function addSpacingToContinuousDomain(
[lower, upper]: number[],
paddingRatio: number
paddingRatio: number,
) {
const domainLength = upper - lower;
const padding = domainLength * paddingRatio;
Expand Down

0 comments on commit d425327

Please sign in to comment.