aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/HistogramBox.scss14
-rw-r--r--src/client/views/nodes/HistogramBox.tsx81
-rw-r--r--src/client/views/nodes/HistogramBoxPrimitives.tsx133
-rw-r--r--src/client/views/nodes/HistogramLabelPrimitives.scss12
-rw-r--r--src/client/views/nodes/HistogramLabelPrimitives.tsx78
5 files changed, 157 insertions, 161 deletions
diff --git a/src/client/views/nodes/HistogramBox.scss b/src/client/views/nodes/HistogramBox.scss
index 7c28fc99e..2660b1b75 100644
--- a/src/client/views/nodes/HistogramBox.scss
+++ b/src/client/views/nodes/HistogramBox.scss
@@ -10,7 +10,8 @@
width:100%;
text-align: center;
bottom:0;
- font-size: 12;
+ font-size: 14;
+ font-weight: bold;
}
.histogrambox-container {
@@ -18,15 +19,4 @@
width:100%;
height: 100%;
}
- .histogramLabelPrimitives-gridlabel {
- position:absolute;
- transform-origin: left top;
- font-size: 12;
- }
- .histogramLabelPrimitives-placer {
- position:absolute;
- width:100%;
- height:100%;
- pointer-events: none;
- }
\ No newline at end of file
diff --git a/src/client/views/nodes/HistogramBox.tsx b/src/client/views/nodes/HistogramBox.tsx
index 2291d1418..3307925a2 100644
--- a/src/client/views/nodes/HistogramBox.tsx
+++ b/src/client/views/nodes/HistogramBox.tsx
@@ -1,5 +1,5 @@
import React = require("react")
-import { computed, observable, reaction, runInAction, trace, action } from "mobx";
+import { computed, observable, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
import Measure from "react-measure";
import { Dictionary } from "typescript-collections";
@@ -7,9 +7,7 @@ import { Opt } from "../../../fields/Field";
import { HistogramField } from "../../../fields/HistogramField";
import { KeyStore } from "../../../fields/KeyStore";
import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
-import { Utils as DashUtils } from '../../../Utils';
import { FilterModel } from '../../northstar/core/filter/FilterModel';
-import { NominalVisualBinRange } from "../../northstar/model/binRanges/NominalVisualBinRange";
import { ChartType, VisualBinRange } from '../../northstar/model/binRanges/VisualBinRange';
import { VisualBinRangeHelper } from "../../northstar/model/binRanges/VisualBinRangeHelper";
import { AggregateBinRange, BinRange, DoubleValueAggregateResult, HistogramResult } from "../../northstar/model/idea/idea";
@@ -17,11 +15,15 @@ import { ModelHelpers } from "../../northstar/model/ModelHelpers";
import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
import { PIXIRectangle } from "../../northstar/utils/MathUtil";
import { SizeConverter } from "../../northstar/utils/SizeConverter";
-import { StyleConstants } from "../../northstar/utils/StyleContants";
import "./../../northstar/utils/Extensions";
import { FieldView, FieldViewProps } from './FieldView';
import "./HistogramBox.scss";
-import { HistogramBoxPrimitives, HistogramBoxPrimitivesProps } from './HistogramBoxPrimitives';
+import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
+import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
+
+export interface HistogramPrimitivesProps {
+ HistoBox: HistogramBox;
+}
@observer
export class HistogramBox extends React.Component<FieldViewProps> {
@@ -101,72 +103,3 @@ export class HistogramBox extends React.Component<FieldViewProps> {
}
}
-@observer
-export class HistogramLabelPrimitives extends React.Component<HistogramBoxPrimitivesProps> {
- componentDidMount() {
- reaction(() => [this.props.HistoBox.PanelWidth, this.props.HistoBox.SizeConverter.LeftOffset, this.props.HistoBox.VisualBinRanges.length],
- (fields) => HistogramLabelPrimitives.computeLabelAngle(fields[0] as number, fields[1] as number, this.props.HistoBox), { fireImmediately: true });
- }
-
- @action
- static computeLabelAngle(panelWidth: number, leftOffset: number, histoBox: HistogramBox) {
- const textWidth = 30;
- if (panelWidth > 0 && histoBox.VisualBinRanges.length && histoBox.VisualBinRanges[0] instanceof NominalVisualBinRange) {
- let space = (panelWidth - leftOffset * 2) / histoBox.VisualBinRanges[0].GetBins().length;
- histoBox.SizeConverter.SetLabelAngle(Math.min(Math.PI / 2, Math.max(Math.PI / 6, textWidth / space * Math.PI / 2)));
- } else if (histoBox.SizeConverter.LabelAngle) {
- histoBox.SizeConverter.SetLabelAngle(0);
- }
- }
- @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
- @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
-
- private renderGridLinesAndLabels(axis: number) {
- let sc = this.props.HistoBox.SizeConverter;
- let vb = this.props.HistoBox.VisualBinRanges;
- if (!vb.length || !sc.Initialized)
- return (null);
- let dim = (axis == 0 ? this.props.HistoBox.PanelWidth : this.props.HistoBox.PanelHeight) / ((axis == 0 && vb[axis] instanceof NominalVisualBinRange) ?
- (12 + 5) : // (<number>FontStyles.AxisLabel.fontSize + 5)));
- sc.MaxLabelSizes[axis].coords[axis] + 5);
-
- let prims: JSX.Element[] = [];
- let labels = vb[axis].GetLabels();
- labels.map((binLabel, i) => {
- let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
- if (i % Math.ceil(labels.length / dim) === 0 && binLabel.label) {
- const label = binLabel.label.Truncate(StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS, "...");
- const textHeight = 14; const textWidth = 30;
- let xStart = (axis === 0 ? r.xFrom + (r.xTo - r.xFrom) / 2.0 : r.xFrom - 10 - textWidth);
- let yStart = (axis === 1 ? r.yFrom - textHeight / 2 : r.yFrom);
-
- if (axis == 0 && vb[axis] instanceof NominalVisualBinRange) {
- let space = (r.xTo - r.xFrom) / sc.RenderDimension * this.props.HistoBox.PanelWidth;
- xStart += Math.max(textWidth / 2, (1 - textWidth / space) * textWidth / 2) - textHeight / 2;
- }
-
- let xPercent = axis == 1 ? `${xStart}px` : `${xStart / sc.RenderDimension * 100}%`
- let yPercent = axis == 0 ? `${this.props.HistoBox.PanelHeight - sc.BottomOffset - textHeight}px` : `${yStart / sc.RenderDimension * 100}%`
-
- prims.push(
- <div className="histogramLabelPrimitives-placer" key={DashUtils.GenerateGuid()} style={{ transform: `translate(${xPercent}, ${yPercent})` }}>
- <div className="histogramLabelPrimitives-gridlabel" style={{ transform: `rotate(${axis == 0 ? sc.LabelAngle : 0}rad)` }}>
- {label}
- </div>
- </div>
- )
- }
- });
- return prims;
- }
-
- render() {
- let xaxislines = this.xaxislines;
- let yaxislines = this.yaxislines;
- return <div className="histogramLabelPrimitives-container">
- {xaxislines}
- {yaxislines}
- </div>
- }
-
-} \ No newline at end of file
diff --git a/src/client/views/nodes/HistogramBoxPrimitives.tsx b/src/client/views/nodes/HistogramBoxPrimitives.tsx
index 06b318750..f15cb5689 100644
--- a/src/client/views/nodes/HistogramBoxPrimitives.tsx
+++ b/src/client/views/nodes/HistogramBoxPrimitives.tsx
@@ -4,82 +4,78 @@ import { observer } from "mobx-react";
import { Utils as DashUtils } from '../../../Utils';
import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
import { ChartType } from '../../northstar/model/binRanges/VisualBinRange';
-import { AggregateFunction, Bin, Brush, HistogramResult, MarginAggregateParameters, MarginAggregateResult } from "../../northstar/model/idea/idea";
+import { AggregateFunction, Bin, Brush, HistogramResult, MarginAggregateParameters, MarginAggregateResult, BinLabel } from "../../northstar/model/idea/idea";
import { ModelHelpers } from "../../northstar/model/ModelHelpers";
import { ArrayUtil } from "../../northstar/utils/ArrayUtil";
import { LABColor } from '../../northstar/utils/LABcolor';
import { PIXIRectangle } from "../../northstar/utils/MathUtil";
import { StyleConstants } from "../../northstar/utils/StyleContants";
-import { HistogramBox } from "./HistogramBox";
+import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
import "./HistogramBoxPrimitives.scss";
import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
import { FilterModel } from "../../northstar/core/filter/FilterModel";
-export interface HistogramBoxPrimitivesProps {
- HistoBox: HistogramBox;
-}
@observer
-export class HistogramBoxPrimitives extends React.Component<HistogramBoxPrimitivesProps> {
+export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesProps> {
+ private get histoOp() { return this.props.HistoBox.HistoOp; }
+ private get renderDimension() { return this.props.HistoBox.SizeConverter.RenderDimension; }
@observable _selectedPrims: HistogramBinPrimitive[] = [];
-
@computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
@computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
- @computed get selectedPrimitives() {
- return this._selectedPrims.map((bp) => this.drawRect(bp.Rect, bp.BarAxis, undefined, () => { }, "border"));
- }
- private getSelectionToggle(histoOp: HistogramOperation, binPrimitives: HistogramBinPrimitive[], allBrushIndex: number, filterModel: FilterModel) {
- let allBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex == allBrushIndex);
- return !allBrushPrim ? () => { } : () => runInAction(() => {
- if (ArrayUtil.Contains(histoOp!.FilterModels, filterModel)) {
- this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1);
- histoOp!.RemoveFilterModels([filterModel]);
- }
- else {
- this._selectedPrims.push(allBrushPrim!);
- histoOp!.AddFilterModels([filterModel]);
- }
- })
- }
- @computed
- get binPrimitives() {
- let histoOp = this.props.HistoBox.HistoOp;
+ @computed get selectedPrimitives() { return this._selectedPrims.map(bp => this.drawRect(bp.Rect, bp.BarAxis, undefined, "border")); }
+ @computed get binPrimitives() {
let histoResult = this.props.HistoBox.HistogramResult;
- if (!histoOp || !histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length)
+ if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length)
return (null);
let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult);
return Object.keys(histoResult.bins).reduce((prims, key) => {
let drawPrims = new HistogramBinPrimitiveCollection(histoResult!.bins![key], this.props.HistoBox);
- let filterModel = ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, histoOp!.X, histoOp!.Y);
+ let filterModel = ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, this.histoOp!.X, this.histoOp!.Y);
this.props.HistoBox.HitTargets.setValue(drawPrims.HitGeom, filterModel);
- let toggle = this.getSelectionToggle(histoOp!, drawPrims.BinPrimitives, allBrushIndex, filterModel);
+ let toggle = this.getSelectionToggle(drawPrims.BinPrimitives, allBrushIndex, filterModel);
drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp =>
- prims.push(...[{ r: bp.Rect, c: bp.Color }, { r: bp.MarginRect, c: StyleConstants.MARGIN_BARS_COLOR }].map(pair => this.drawRect(pair.r, bp.BarAxis, pair.c, toggle, "bar"))));
+ prims.push(...[{ r: bp.Rect, c: bp.Color }, { r: bp.MarginRect, c: StyleConstants.MARGIN_BARS_COLOR }].map(pair => this.drawRect(pair.r, bp.BarAxis, pair.c, "bar", toggle))));
return prims;
}, [] as JSX.Element[]);
}
+ private getSelectionToggle(binPrimitives: HistogramBinPrimitive[], allBrushIndex: number, filterModel: FilterModel) {
+ let allBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex == allBrushIndex);
+ return !allBrushPrim ? () => { } : () => runInAction(() => {
+ if (ArrayUtil.Contains(this.histoOp!.FilterModels, filterModel)) {
+ this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1);
+ this.histoOp!.RemoveFilterModels([filterModel]);
+ }
+ else {
+ this._selectedPrims.push(allBrushPrim!);
+ this.histoOp!.AddFilterModels([filterModel]);
+ }
+ })
+ }
private renderGridLinesAndLabels(axis: number) {
- let sc = this.props.HistoBox.SizeConverter;
- let vb = this.props.HistoBox.VisualBinRanges;
- if (!vb.length || !sc.Initialized)
+ if (!this.props.HistoBox.SizeConverter.Initialized)
return (null);
-
- let prims: JSX.Element[] = [];
- let labels = vb[axis].GetLabels();
- labels.map((binLabel, i) => {
- let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
-
- prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 1 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 1));
+ let labels = this.props.HistoBox.VisualBinRanges[axis].GetLabels();
+ return labels.reduce((prims, binLabel, i) => {
+ let r = this.props.HistoBox.SizeConverter.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
+ prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
if (i == labels.length - 1)
- prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 1 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 1));
- });
- return prims;
+ prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
+ return prims;
+ }, [] as JSX.Element[]);
}
+ drawEntity(xFrom: number, yFrom: number, entity: JSX.Element) {
+ let transXpercent = xFrom / this.renderDimension * 100;
+ let transYpercent = yFrom / this.renderDimension * 100;
+ return (<div key={DashUtils.GenerateGuid()} className={`histogramboxprimitives-placer`} style={{ transform: `translate(${transXpercent}%, ${transYpercent}%)` }}>
+ {entity}
+ </div>);
+ }
drawLine(xFrom: number, yFrom: number, width: number, height: number) {
if (height < 0) {
yFrom += height;
@@ -89,46 +85,33 @@ export class HistogramBoxPrimitives extends React.Component<HistogramBoxPrimitiv
xFrom += width;
width = -width;
}
- let transXpercent = (xFrom) / this.props.HistoBox.SizeConverter.RenderDimension;
- let transYpercent = (yFrom) / this.props.HistoBox.SizeConverter.RenderDimension;
- let trans2Xpercent = width == 1 ? "1px" : `${(xFrom + width) / this.props.HistoBox.SizeConverter.RenderDimension * 100}%`;
- let trans2Ypercent = height == 1 ? "1px" : `${(yFrom + height) / this.props.HistoBox.SizeConverter.RenderDimension * 100}%`;
- return <div key={DashUtils.GenerateGuid()} className="histogramboxprimitives-placer" style={{ transform: `translate(${transXpercent * 100}%, ${transYpercent * 100}%)` }}>
- <div className="histogramboxprimitives-line"
- style={{
- width: trans2Xpercent,
- height: trans2Ypercent,
- }}
- /></div>;
+ let trans2Xpercent = width == 0 ? `1px` : `${(xFrom + width) / this.renderDimension * 100}%`;
+ let trans2Ypercent = height == 0 ? `1px` : `${(yFrom + height) / this.renderDimension * 100}%`;
+ let line = (<div className="histogramboxprimitives-line" style={{ width: trans2Xpercent, height: trans2Ypercent, }} />);
+ return this.drawEntity(xFrom, yFrom, line);
}
- drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, tapHandler: () => void, classExt: string) {
- let widthPercent = (r.width - 0) / this.props.HistoBox.SizeConverter.RenderDimension;
- let heightPercent = r.height / this.props.HistoBox.SizeConverter.RenderDimension;
- let transXpercent = (r.x) / this.props.HistoBox.SizeConverter.RenderDimension;
- let transYpercent = (r.y) / this.props.HistoBox.SizeConverter.RenderDimension;
- return (<div key={DashUtils.GenerateGuid()} className={`histogramboxprimitives-placer`} style={{ transform: `translate(${transXpercent * 100}%, ${transYpercent * 100}%)` }}>
- <div className={`histogramboxprimitives-${classExt}`} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
- style={{
- borderBottomStyle: barAxis == 1 ? "none" : "solid",
- borderLeftStyle: barAxis == 0 ? "none" : "solid",
- width: `${widthPercent * 100}%`,
- height: `${heightPercent * 100}%`,
- background: color ? `${LABColor.RGBtoHexString(color)}` : ""
- }}
- /></div>);
+ drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = () => { }) {
+ let widthPercent = r.width / this.renderDimension * 100;
+ let heightPercent = r.height / this.renderDimension * 100;
+ let rect = (<div className={`histogramboxprimitives-${classExt}`} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
+ style={{
+ borderBottomStyle: barAxis == 1 ? "none" : "solid",
+ borderLeftStyle: barAxis == 0 ? "none" : "solid",
+ width: `${widthPercent}%`,
+ height: `${heightPercent}%`,
+ background: color ? `${LABColor.RGBtoHexString(color)}` : ""
+ }}
+ />);
+ return this.drawEntity(r.x, r.y, rect);
}
render() {
- if (!this.props.HistoBox.SizeConverter.Initialized)
- return (null);
- let xaxislines = this.xaxislines;
- let yaxislines = this.yaxislines;
return <div className="histogramboxprimitives-container" style={{
width: "100%",
height: "100%",
}}>
- {xaxislines}
- {yaxislines}
+ {this.xaxislines}
+ {this.yaxislines}
{this.binPrimitives}
{this.selectedPrimitives}
</div>
diff --git a/src/client/views/nodes/HistogramLabelPrimitives.scss b/src/client/views/nodes/HistogramLabelPrimitives.scss
new file mode 100644
index 000000000..d8ee88d72
--- /dev/null
+++ b/src/client/views/nodes/HistogramLabelPrimitives.scss
@@ -0,0 +1,12 @@
+
+ .histogramLabelPrimitives-gridlabel {
+ position:absolute;
+ transform-origin: left top;
+ font-size: 11;
+ }
+ .histogramLabelPrimitives-placer {
+ position:absolute;
+ width:100%;
+ height:100%;
+ pointer-events: none;
+ } \ No newline at end of file
diff --git a/src/client/views/nodes/HistogramLabelPrimitives.tsx b/src/client/views/nodes/HistogramLabelPrimitives.tsx
new file mode 100644
index 000000000..7f365e45b
--- /dev/null
+++ b/src/client/views/nodes/HistogramLabelPrimitives.tsx
@@ -0,0 +1,78 @@
+import React = require("react")
+import { action, computed, reaction } from "mobx";
+import { observer } from "mobx-react";
+import { Utils as DashUtils } from '../../../Utils';
+import { NominalVisualBinRange } from "../../northstar/model/binRanges/NominalVisualBinRange";
+import { StyleConstants } from "../../northstar/utils/StyleContants";
+import "./../../northstar/utils/Extensions";
+import "./HistogramLabelPrimitives.scss";
+import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
+
+@observer
+export class HistogramLabelPrimitives extends React.Component<HistogramPrimitivesProps> {
+ componentDidMount() {
+ reaction(() => [this.props.HistoBox.PanelWidth, this.props.HistoBox.SizeConverter.LeftOffset, this.props.HistoBox.VisualBinRanges.length],
+ (fields) => HistogramLabelPrimitives.computeLabelAngle(fields[0] as number, fields[1] as number, this.props.HistoBox), { fireImmediately: true });
+ }
+
+ @action
+ static computeLabelAngle(panelWidth: number, leftOffset: number, histoBox: HistogramBox) {
+ const textWidth = 30;
+ if (panelWidth > 0 && histoBox.VisualBinRanges.length && histoBox.VisualBinRanges[0] instanceof NominalVisualBinRange) {
+ let space = (panelWidth - leftOffset * 2) / histoBox.VisualBinRanges[0].GetBins().length;
+ histoBox.SizeConverter.SetLabelAngle(Math.min(Math.PI / 2, Math.max(Math.PI / 6, textWidth / space * Math.PI / 2)));
+ } else if (histoBox.SizeConverter.LabelAngle) {
+ histoBox.SizeConverter.SetLabelAngle(0);
+ }
+ }
+ @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
+ @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
+
+ private renderGridLinesAndLabels(axis: number) {
+ let sc = this.props.HistoBox.SizeConverter;
+ let vb = this.props.HistoBox.VisualBinRanges;
+ if (!vb.length || !sc.Initialized)
+ return (null);
+ let dim = (axis == 0 ? this.props.HistoBox.PanelWidth : this.props.HistoBox.PanelHeight) / ((axis == 0 && vb[axis] instanceof NominalVisualBinRange) ?
+ (12 + 5) : // (<number>FontStyles.AxisLabel.fontSize + 5)));
+ sc.MaxLabelSizes[axis].coords[axis] + 5);
+
+ let labels = vb[axis].GetLabels();
+ return labels.reduce((prims, binLabel, i) => {
+ let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
+ if (i % Math.ceil(labels.length / dim) === 0 && binLabel.label) {
+ const label = binLabel.label.Truncate(StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS, "...");
+ const textHeight = 14; const textWidth = 30;
+ let xStart = (axis === 0 ? r.xFrom + (r.xTo - r.xFrom) / 2.0 : r.xFrom - 10 - textWidth);
+ let yStart = (axis === 1 ? r.yFrom - textHeight / 2 : r.yFrom);
+
+ if (axis == 0 && vb[axis] instanceof NominalVisualBinRange) {
+ let space = (r.xTo - r.xFrom) / sc.RenderDimension * this.props.HistoBox.PanelWidth;
+ xStart += Math.max(textWidth / 2, (1 - textWidth / space) * textWidth / 2) - textHeight / 2;
+ }
+
+ let xPercent = axis == 1 ? `${xStart}px` : `${xStart / sc.RenderDimension * 100}%`
+ let yPercent = axis == 0 ? `${this.props.HistoBox.PanelHeight - sc.BottomOffset - textHeight}px` : `${yStart / sc.RenderDimension * 100}%`
+
+ prims.push(
+ <div className="histogramLabelPrimitives-placer" key={DashUtils.GenerateGuid()} style={{ transform: `translate(${xPercent}, ${yPercent})` }}>
+ <div className="histogramLabelPrimitives-gridlabel" style={{ transform: `rotate(${axis == 0 ? sc.LabelAngle : 0}rad)` }}>
+ {label}
+ </div>
+ </div>
+ )
+ }
+ return prims;
+ }, [] as JSX.Element[]);
+ }
+
+ render() {
+ let xaxislines = this.xaxislines;
+ let yaxislines = this.yaxislines;
+ return <div className="histogramLabelPrimitives-container">
+ {xaxislines}
+ {yaxislines}
+ </div>
+ }
+
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 18:38:59 +0000