@spider-analyzer/timeline 4.0.2 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/TimeLine.js +156 -152
  2. package/package.json +1 -1
  3. package/src/TimeLine.jsx +163 -158
package/dist/TimeLine.js CHANGED
@@ -828,8 +828,8 @@ var TimeLine = /*#__PURE__*/function (_Component) {
828
828
  var start = (0, _momentTimezone["default"])(item.time);
829
829
  var end = (0, _momentTimezone["default"])(item.time).add(histo.intervalMs);
830
830
  return {
831
- x1: (0, _isFunction["default"])(_this2.xAxis) ? _this2.xAxis(start) : 0,
832
- x2: (0, _isFunction["default"])(_this2.xAxis) ? _this2.xAxis(end) : 0,
831
+ x1: _this2.xAxis(start),
832
+ x2: _this2.xAxis(end),
833
833
  start: start,
834
834
  end: end,
835
835
  metrics: item.metrics,
@@ -887,158 +887,162 @@ var TimeLine = /*#__PURE__*/function (_Component) {
887
887
  x: 0,
888
888
  y: margin.top - 5
889
889
  };
890
- var _this$prepareVertical = this.prepareVerticalScale({
891
- yAxis: yAxis,
892
- xAxis: xAxis,
890
+ if ((0, _isFunction["default"])(this.xAxis)) {
891
+ var _this$prepareVertical = this.prepareVerticalScale({
892
+ yAxis: yAxis,
893
+ xAxis: xAxis,
894
+ height: height,
895
+ histo: histo,
896
+ margin: margin
897
+ }),
898
+ verticalScale = _this$prepareVertical.verticalScale,
899
+ verticalMarks = _this$prepareVertical.verticalMarks,
900
+ maxHeight = _this$prepareVertical.maxHeight;
901
+ var items = this.prepareHistogram({
902
+ histo: histo,
903
+ domain: domain,
904
+ verticalScale: verticalScale
905
+ });
906
+ this.items = items;
907
+ return /*#__PURE__*/_react["default"].createElement("svg", {
908
+ ref: this.timelineElement,
909
+ width: width,
893
910
  height: height,
911
+ onWheel: isActive ? this.onWheel : undefined
912
+ }, /*#__PURE__*/_react["default"].createElement("g", {
913
+ transform: "translate(".concat(margin.left, ",").concat(margin.top, ")")
914
+ }, yAxis.showGrid && /*#__PURE__*/_react["default"].createElement(_YGrid["default"], {
915
+ classes: classes,
916
+ origin: pointZero,
917
+ yAxis: verticalScale,
918
+ marks: verticalMarks,
919
+ xAxisWidth: histoWidth + 13
920
+ }), xAxis.showGrid && /*#__PURE__*/_react["default"].createElement(_XGrid["default"], {
921
+ classes: classes,
922
+ origin: pointZero,
923
+ xAxis: this.xAxis,
924
+ marks: ticks,
925
+ yAxisHeight: maxHeight
926
+ }), isActive && /*#__PURE__*/_react["default"].createElement(_Histogram["default"], {
927
+ classes: classes,
928
+ origin: pointZero,
929
+ items: items,
894
930
  histo: histo,
895
- margin: margin
896
- }),
897
- verticalScale = _this$prepareVertical.verticalScale,
898
- verticalMarks = _this$prepareVertical.verticalMarks,
899
- maxHeight = _this$prepareVertical.maxHeight;
900
- var items = this.prepareHistogram({
901
- histo: histo,
902
- domain: domain,
903
- verticalScale: verticalScale
904
- });
905
- this.items = items;
906
- return (0, _isFunction["default"])(this.xAxis) && /*#__PURE__*/_react["default"].createElement("svg", {
907
- ref: this.timelineElement,
908
- width: width,
909
- height: height,
910
- onWheel: isActive ? this.onWheel : undefined
911
- }, /*#__PURE__*/_react["default"].createElement("g", {
912
- transform: "translate(".concat(margin.left, ",").concat(margin.top, ")")
913
- }, yAxis.showGrid && /*#__PURE__*/_react["default"].createElement(_YGrid["default"], {
914
- classes: classes,
915
- origin: pointZero,
916
- yAxis: verticalScale,
917
- marks: verticalMarks,
918
- xAxisWidth: histoWidth + 13
919
- }), xAxis.showGrid && /*#__PURE__*/_react["default"].createElement(_XGrid["default"], {
920
- classes: classes,
921
- origin: pointZero,
922
- xAxis: this.xAxis,
923
- marks: ticks,
924
- yAxisHeight: maxHeight
925
- }), isActive && /*#__PURE__*/_react["default"].createElement(_Histogram["default"], {
926
- classes: classes,
927
- origin: pointZero,
928
- items: items,
929
- histo: histo,
930
- verticalScale: verticalScale,
931
- metricsDefinition: metricsDefinition,
932
- barHovered: barHovered,
933
- dragging: dragging,
934
- tooltipVisible: tooltipVisible,
935
- onFormatTimeToolTips: onFormatTimeToolTips,
936
- onFormatMetricLegend: onFormatMetricLegend,
937
- HistoToolTip: HistoToolTip
938
- }), /*#__PURE__*/_react["default"].createElement(_XAxis["default"], {
939
- classes: classes,
940
- origin: pointZero,
941
- axisWidth: histoWidth + 13,
942
- min: domain && domain.min,
943
- max: domain && domain.max,
944
- xAxis: this.xAxis,
945
- marks: ticks,
946
- arrowPath: xAxis.arrowPath,
947
- yAxisHeight: maxHeight,
948
- showGrid: xAxis.showGrid,
949
- onFormatTimeLegend: onFormatTimeLegend
950
- }), /*#__PURE__*/_react["default"].createElement(_Tools["default"], {
951
- classes: classes,
952
- rcToolTipPrefixCls: rcToolTipPrefixCls,
953
- origin: pointZero,
954
- histoWidth: histoWidth,
955
- isActive: isActive,
956
- tools: tools,
957
- labels: this.labels,
958
- onGoto: this.onGoto,
959
- onResetTime: onResetTime,
960
- shiftTimeLine: this.shiftTimeLine
961
- }), /*#__PURE__*/_react["default"].createElement(_YAxis["default"], {
962
- classes: classes,
963
- origin: pointZero,
964
- maxHeight: maxHeight,
965
- yAxis: verticalScale,
966
- marks: verticalMarks,
967
- arrowPath: yAxis.arrowPath,
968
- showGrid: yAxis.showGrid,
969
- xAxisWidth: histoWidth + 13,
970
- onFormatMetricLegend: onFormatMetricLegend
971
- }), showLegend && /*#__PURE__*/_react["default"].createElement(_Legend["default"], {
972
- classes: classes,
973
- origin: {
974
- x: -5,
975
- y: margin.top + 2
976
- },
977
- metricsDefinition: metricsDefinition
978
- }), isActive && tools.cursor !== false && /*#__PURE__*/_react["default"].createElement(_Cursor["default"], {
979
- origin: originCursor,
980
- rcToolTipPrefixCls: rcToolTipPrefixCls,
981
- classes: classes,
982
- startPos: this.xAxis(start),
983
- startIsOutOfView: start.isBefore(domain.min) || start.isAfter(domain.max),
984
- endPos: this.xAxis(stop),
985
- endIsOutOfView: stop.isBefore(domain.min) || stop.isAfter(domain.max),
986
- cursorIsBeforeView: start.isBefore(domain.min) && stop.isBefore(domain.min),
987
- cursorIsAfterView: start.isAfter(domain.max) && stop.isAfter(domain.max),
988
- height: maxHeight,
989
- overlayHeight: height - margin.top,
990
- overlayWidth: histoWidth,
991
- tooltipVisible: tooltipVisible,
992
- barHovered: barHovered,
993
- setToolTipVisible: function setToolTipVisible(tooltipVisible) {
994
- return _this3.setState({
995
- tooltipVisible: tooltipVisible
996
- });
997
- },
998
- setBarHovered: function setBarHovered(barHovered) {
999
- return _this3.setState({
1000
- barHovered: barHovered
1001
- });
1002
- },
1003
- items: items,
1004
- showHistoToolTip: showHistoToolTip,
1005
- dragging: dragging,
1006
- setDragging: function setDragging(dragging) {
1007
- return _this3.setState({
1008
- dragging: dragging
1009
- });
1010
- },
1011
- canZoom: true,
1012
- minZoom: minZoom,
1013
- maxZoom: maxZoom,
1014
- startText: onFormatTimeToolTips(start),
1015
- stopText: onFormatTimeToolTips(stop),
1016
- maxSize: maxTimespan,
1017
- tools: tools,
1018
- gotoCursorLabel: this.labels.gotoCursor,
1019
- zoomInLabel: this.labels.zoomInLabel,
1020
- zoomOutLabel: this.labels.zoomOutLabel,
1021
- zoomIn: this.zoomIn,
1022
- zoomOut: this.zoomOut,
1023
- onResizeLeftCursor: this.onResizeLeftCursor,
1024
- onResizeRightCursor: this.onResizeRightCursor,
1025
- onEndResizeCursor: this.onEndChangeCursor,
1026
- onDragCursor: this.onDragCursor,
1027
- onEndDragCursor: this.onEndChangeCursor,
1028
- onStartDrawCursor: this.onStartDrawCursor,
1029
- onDrawCursor: this.onDrawCursor,
1030
- onEndCursor: this.onEndDrawCursor,
1031
- onMoveDomain: this.moveTimeLine,
1032
- onMovedDomain: this.movedTimeLine,
1033
- onGotoCursor: this.onGotoCursor
1034
- }), isActive && quality && quality.items && /*#__PURE__*/_react["default"].createElement(_QualityLine["default"], {
1035
- classes: classes,
1036
- rcToolTipPrefixCls: rcToolTipPrefixCls,
1037
- origin: pointZero,
1038
- quality: quality,
1039
- qualityScale: qualityScale,
1040
- xAxis: this.xAxis
1041
- })));
931
+ verticalScale: verticalScale,
932
+ metricsDefinition: metricsDefinition,
933
+ barHovered: barHovered,
934
+ dragging: dragging,
935
+ tooltipVisible: tooltipVisible,
936
+ onFormatTimeToolTips: onFormatTimeToolTips,
937
+ onFormatMetricLegend: onFormatMetricLegend,
938
+ HistoToolTip: HistoToolTip
939
+ }), /*#__PURE__*/_react["default"].createElement(_XAxis["default"], {
940
+ classes: classes,
941
+ origin: pointZero,
942
+ axisWidth: histoWidth + 13,
943
+ min: domain && domain.min,
944
+ max: domain && domain.max,
945
+ xAxis: this.xAxis,
946
+ marks: ticks,
947
+ arrowPath: xAxis.arrowPath,
948
+ yAxisHeight: maxHeight,
949
+ showGrid: xAxis.showGrid,
950
+ onFormatTimeLegend: onFormatTimeLegend
951
+ }), /*#__PURE__*/_react["default"].createElement(_Tools["default"], {
952
+ classes: classes,
953
+ rcToolTipPrefixCls: rcToolTipPrefixCls,
954
+ origin: pointZero,
955
+ histoWidth: histoWidth,
956
+ isActive: isActive,
957
+ tools: tools,
958
+ labels: this.labels,
959
+ onGoto: this.onGoto,
960
+ onResetTime: onResetTime,
961
+ shiftTimeLine: this.shiftTimeLine
962
+ }), /*#__PURE__*/_react["default"].createElement(_YAxis["default"], {
963
+ classes: classes,
964
+ origin: pointZero,
965
+ maxHeight: maxHeight,
966
+ yAxis: verticalScale,
967
+ marks: verticalMarks,
968
+ arrowPath: yAxis.arrowPath,
969
+ showGrid: yAxis.showGrid,
970
+ xAxisWidth: histoWidth + 13,
971
+ onFormatMetricLegend: onFormatMetricLegend
972
+ }), showLegend && /*#__PURE__*/_react["default"].createElement(_Legend["default"], {
973
+ classes: classes,
974
+ origin: {
975
+ x: -5,
976
+ y: margin.top + 2
977
+ },
978
+ metricsDefinition: metricsDefinition
979
+ }), isActive && tools.cursor !== false && /*#__PURE__*/_react["default"].createElement(_Cursor["default"], {
980
+ origin: originCursor,
981
+ rcToolTipPrefixCls: rcToolTipPrefixCls,
982
+ classes: classes,
983
+ startPos: this.xAxis(start),
984
+ startIsOutOfView: start.isBefore(domain.min) || start.isAfter(domain.max),
985
+ endPos: this.xAxis(stop),
986
+ endIsOutOfView: stop.isBefore(domain.min) || stop.isAfter(domain.max),
987
+ cursorIsBeforeView: start.isBefore(domain.min) && stop.isBefore(domain.min),
988
+ cursorIsAfterView: start.isAfter(domain.max) && stop.isAfter(domain.max),
989
+ height: maxHeight,
990
+ overlayHeight: height - margin.top,
991
+ overlayWidth: histoWidth,
992
+ tooltipVisible: tooltipVisible,
993
+ barHovered: barHovered,
994
+ setToolTipVisible: function setToolTipVisible(tooltipVisible) {
995
+ return _this3.setState({
996
+ tooltipVisible: tooltipVisible
997
+ });
998
+ },
999
+ setBarHovered: function setBarHovered(barHovered) {
1000
+ return _this3.setState({
1001
+ barHovered: barHovered
1002
+ });
1003
+ },
1004
+ items: items,
1005
+ showHistoToolTip: showHistoToolTip,
1006
+ dragging: dragging,
1007
+ setDragging: function setDragging(dragging) {
1008
+ return _this3.setState({
1009
+ dragging: dragging
1010
+ });
1011
+ },
1012
+ canZoom: true,
1013
+ minZoom: minZoom,
1014
+ maxZoom: maxZoom,
1015
+ startText: onFormatTimeToolTips(start),
1016
+ stopText: onFormatTimeToolTips(stop),
1017
+ maxSize: maxTimespan,
1018
+ tools: tools,
1019
+ gotoCursorLabel: this.labels.gotoCursor,
1020
+ zoomInLabel: this.labels.zoomInLabel,
1021
+ zoomOutLabel: this.labels.zoomOutLabel,
1022
+ zoomIn: this.zoomIn,
1023
+ zoomOut: this.zoomOut,
1024
+ onResizeLeftCursor: this.onResizeLeftCursor,
1025
+ onResizeRightCursor: this.onResizeRightCursor,
1026
+ onEndResizeCursor: this.onEndChangeCursor,
1027
+ onDragCursor: this.onDragCursor,
1028
+ onEndDragCursor: this.onEndChangeCursor,
1029
+ onStartDrawCursor: this.onStartDrawCursor,
1030
+ onDrawCursor: this.onDrawCursor,
1031
+ onEndCursor: this.onEndDrawCursor,
1032
+ onMoveDomain: this.moveTimeLine,
1033
+ onMovedDomain: this.movedTimeLine,
1034
+ onGotoCursor: this.onGotoCursor
1035
+ }), isActive && quality && quality.items && /*#__PURE__*/_react["default"].createElement(_QualityLine["default"], {
1036
+ classes: classes,
1037
+ rcToolTipPrefixCls: rcToolTipPrefixCls,
1038
+ origin: pointZero,
1039
+ quality: quality,
1040
+ qualityScale: qualityScale,
1041
+ xAxis: this.xAxis
1042
+ })));
1043
+ } else {
1044
+ return null;
1045
+ }
1042
1046
  }
1043
1047
  }]);
1044
1048
  return TimeLine;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spider-analyzer/timeline",
3
- "version": "4.0.2",
3
+ "version": "4.0.3",
4
4
  "description": "React graphical component to display metric over time with a time selection feature.",
5
5
  "author": "Thibaut Raballand <spider.analyzer@gmail.com> (https://spider-analyzer.io)",
6
6
  "license": "MIT",
package/src/TimeLine.jsx CHANGED
@@ -257,8 +257,8 @@ export default class TimeLine extends Component{
257
257
  const start = moment(item.time);
258
258
  const end = moment(item.time).add(histo.intervalMs);
259
259
  return {
260
- x1: isFunction(this.xAxis) ? this.xAxis(start) : 0,
261
- x2: isFunction(this.xAxis) ? this.xAxis(end) : 0,
260
+ x1: this.xAxis(start),
261
+ x2: this.xAxis(end),
262
262
  start,
263
263
  end,
264
264
  metrics: item.metrics,
@@ -293,172 +293,177 @@ export default class TimeLine extends Component{
293
293
  y: margin.top - 5
294
294
  }
295
295
 
296
- const {verticalScale, verticalMarks, maxHeight} = this.prepareVerticalScale({yAxis, xAxis, height, histo, margin});
297
- const items = this.prepareHistogram({histo, domain, verticalScale});
298
- this.items = items;
299
-
300
- return isFunction(this.xAxis) && (
301
- <svg
302
- ref={this.timelineElement}
303
- width={width}
304
- height={height}
305
- onWheel={isActive ? this.onWheel : undefined}
306
- >
307
- <g transform={`translate(${margin.left},${margin.top})`}>
308
- {
309
- yAxis.showGrid &&
310
- <YGrid
311
- classes={classes}
312
- origin={pointZero}
313
- yAxis={verticalScale}
314
- marks={verticalMarks}
315
- xAxisWidth={histoWidth + 13}
316
- />
317
- }
318
- {
319
- xAxis.showGrid &&
320
- <XGrid
296
+ if(isFunction(this.xAxis)){
297
+ const {verticalScale, verticalMarks, maxHeight} = this.prepareVerticalScale({yAxis, xAxis, height, histo, margin});
298
+ const items = this.prepareHistogram({histo, domain, verticalScale});
299
+ this.items = items;
300
+
301
+ return (
302
+ <svg
303
+ ref={this.timelineElement}
304
+ width={width}
305
+ height={height}
306
+ onWheel={isActive ? this.onWheel : undefined}
307
+ >
308
+ <g transform={`translate(${margin.left},${margin.top})`}>
309
+ {
310
+ yAxis.showGrid &&
311
+ <YGrid
312
+ classes={classes}
313
+ origin={pointZero}
314
+ yAxis={verticalScale}
315
+ marks={verticalMarks}
316
+ xAxisWidth={histoWidth + 13}
317
+ />
318
+ }
319
+ {
320
+ xAxis.showGrid &&
321
+ <XGrid
322
+ classes={classes}
323
+ origin={pointZero}
324
+ xAxis={this.xAxis}
325
+ marks={ticks}
326
+ yAxisHeight={maxHeight}
327
+ />
328
+ }
329
+ {
330
+ isActive &&
331
+ <Histogram
332
+ classes={classes}
333
+ origin={pointZero}
334
+ items={items}
335
+ histo={histo}
336
+ verticalScale={verticalScale}
337
+ metricsDefinition={metricsDefinition}
338
+ barHovered={barHovered}
339
+ dragging={dragging}
340
+ tooltipVisible={tooltipVisible}
341
+ onFormatTimeToolTips={onFormatTimeToolTips}
342
+ onFormatMetricLegend={onFormatMetricLegend}
343
+ HistoToolTip={HistoToolTip}
344
+ />
345
+ }
346
+ <XAxis
321
347
  classes={classes}
322
348
  origin={pointZero}
349
+ axisWidth={histoWidth + 13}
350
+ min={domain && domain.min}
351
+ max={domain && domain.max}
323
352
  xAxis={this.xAxis}
324
353
  marks={ticks}
354
+ arrowPath={xAxis.arrowPath}
325
355
  yAxisHeight={maxHeight}
356
+ showGrid={xAxis.showGrid}
357
+ onFormatTimeLegend={onFormatTimeLegend}
326
358
  />
327
- }
328
- {
329
- isActive &&
330
- <Histogram
359
+ <Tools
360
+ classes={classes}
361
+ rcToolTipPrefixCls={rcToolTipPrefixCls}
362
+ origin={pointZero}
363
+ histoWidth={histoWidth}
364
+ isActive={isActive}
365
+ tools={tools}
366
+ labels={this.labels}
367
+ onGoto={this.onGoto}
368
+ onResetTime={onResetTime}
369
+ shiftTimeLine={this.shiftTimeLine}
370
+ />
371
+ <YAxis
331
372
  classes={classes}
332
373
  origin={pointZero}
333
- items={items}
334
- histo={histo}
335
- verticalScale={verticalScale}
336
- metricsDefinition={metricsDefinition}
337
- barHovered={barHovered}
338
- dragging={dragging}
339
- tooltipVisible={tooltipVisible}
340
- onFormatTimeToolTips={onFormatTimeToolTips}
374
+ maxHeight={maxHeight}
375
+ yAxis={verticalScale}
376
+ marks={verticalMarks}
377
+ arrowPath={yAxis.arrowPath}
378
+ showGrid={yAxis.showGrid}
379
+ xAxisWidth={histoWidth + 13}
341
380
  onFormatMetricLegend={onFormatMetricLegend}
342
- HistoToolTip={HistoToolTip}
343
381
  />
344
- }
345
- <XAxis
346
- classes={classes}
347
- origin={pointZero}
348
- axisWidth={histoWidth + 13}
349
- min={domain && domain.min}
350
- max={domain && domain.max}
351
- xAxis={this.xAxis}
352
- marks={ticks}
353
- arrowPath={xAxis.arrowPath}
354
- yAxisHeight={maxHeight}
355
- showGrid={xAxis.showGrid}
356
- onFormatTimeLegend={onFormatTimeLegend}
357
- />
358
- <Tools
359
- classes={classes}
360
- rcToolTipPrefixCls={rcToolTipPrefixCls}
361
- origin={pointZero}
362
- histoWidth={histoWidth}
363
- isActive={isActive}
364
- tools={tools}
365
- labels={this.labels}
366
- onGoto={this.onGoto}
367
- onResetTime={onResetTime}
368
- shiftTimeLine={this.shiftTimeLine}
369
- />
370
- <YAxis
371
- classes={classes}
372
- origin={pointZero}
373
- maxHeight={maxHeight}
374
- yAxis={verticalScale}
375
- marks={verticalMarks}
376
- arrowPath={yAxis.arrowPath}
377
- showGrid={yAxis.showGrid}
378
- xAxisWidth={histoWidth + 13}
379
- onFormatMetricLegend={onFormatMetricLegend}
380
- />
381
- {showLegend &&
382
- <Legend
383
- classes={classes}
384
- origin={{
385
- x: -5,
386
- y: margin.top + 2
387
- }}
388
- metricsDefinition={metricsDefinition}
389
- />
390
- }
391
- { isActive && tools.cursor!==false &&
392
- <Cursor
393
- origin = {originCursor}
394
- rcToolTipPrefixCls={rcToolTipPrefixCls}
395
- classes={classes}
396
-
397
- startPos={this.xAxis(start)}
398
- startIsOutOfView={start.isBefore(domain.min) || start.isAfter(domain.max)}
399
-
400
- endPos={this.xAxis(stop)}
401
- endIsOutOfView={stop.isBefore(domain.min) || stop.isAfter(domain.max)}
402
-
403
- cursorIsBeforeView={start.isBefore(domain.min) && stop.isBefore(domain.min)}
404
- cursorIsAfterView={start.isAfter(domain.max) && stop.isAfter(domain.max)}
405
-
406
- height={maxHeight}
407
-
408
- overlayHeight={height - margin.top}
409
- overlayWidth={histoWidth}
410
- tooltipVisible={tooltipVisible}
411
- barHovered={barHovered}
412
- setToolTipVisible={tooltipVisible => this.setState({tooltipVisible})}
413
- setBarHovered={barHovered => this.setState({barHovered})}
414
- items={items}
415
- showHistoToolTip={showHistoToolTip}
416
- dragging={dragging}
417
- setDragging={(dragging) => this.setState({dragging})}
418
-
419
- canZoom={true}
420
- minZoom={minZoom}
421
- maxZoom={maxZoom}
422
-
423
- startText={onFormatTimeToolTips(start)}
424
- stopText={onFormatTimeToolTips(stop)}
425
-
426
- maxSize={maxTimespan}
427
-
428
- tools={tools}
429
-
430
- gotoCursorLabel={this.labels.gotoCursor}
431
- zoomInLabel={this.labels.zoomInLabel}
432
- zoomOutLabel={this.labels.zoomOutLabel}
433
-
434
- zoomIn={this.zoomIn}
435
- zoomOut={this.zoomOut}
436
- onResizeLeftCursor={this.onResizeLeftCursor}
437
- onResizeRightCursor={this.onResizeRightCursor}
438
- onEndResizeCursor={this.onEndChangeCursor}
439
- onDragCursor={this.onDragCursor}
440
- onEndDragCursor={this.onEndChangeCursor}
441
- onStartDrawCursor={this.onStartDrawCursor}
442
- onDrawCursor={this.onDrawCursor}
443
- onEndCursor={this.onEndDrawCursor}
444
- onMoveDomain={this.moveTimeLine}
445
- onMovedDomain={this.movedTimeLine}
446
- onGotoCursor={this.onGotoCursor}
447
- />
448
- }
449
- { isActive && quality && quality.items &&
450
- <QualityLine
451
- classes={classes}
452
- rcToolTipPrefixCls={rcToolTipPrefixCls}
453
- origin={pointZero}
454
- quality={quality}
455
- qualityScale={qualityScale}
456
- xAxis={this.xAxis}
457
- />
458
- }
459
- </g>
460
- </svg>
461
- )
382
+ {showLegend &&
383
+ <Legend
384
+ classes={classes}
385
+ origin={{
386
+ x: -5,
387
+ y: margin.top + 2
388
+ }}
389
+ metricsDefinition={metricsDefinition}
390
+ />
391
+ }
392
+ { isActive && tools.cursor!==false &&
393
+ <Cursor
394
+ origin = {originCursor}
395
+ rcToolTipPrefixCls={rcToolTipPrefixCls}
396
+ classes={classes}
397
+
398
+ startPos={this.xAxis(start)}
399
+ startIsOutOfView={start.isBefore(domain.min) || start.isAfter(domain.max)}
400
+
401
+ endPos={this.xAxis(stop)}
402
+ endIsOutOfView={stop.isBefore(domain.min) || stop.isAfter(domain.max)}
403
+
404
+ cursorIsBeforeView={start.isBefore(domain.min) && stop.isBefore(domain.min)}
405
+ cursorIsAfterView={start.isAfter(domain.max) && stop.isAfter(domain.max)}
406
+
407
+ height={maxHeight}
408
+
409
+ overlayHeight={height - margin.top}
410
+ overlayWidth={histoWidth}
411
+ tooltipVisible={tooltipVisible}
412
+ barHovered={barHovered}
413
+ setToolTipVisible={tooltipVisible => this.setState({tooltipVisible})}
414
+ setBarHovered={barHovered => this.setState({barHovered})}
415
+ items={items}
416
+ showHistoToolTip={showHistoToolTip}
417
+ dragging={dragging}
418
+ setDragging={(dragging) => this.setState({dragging})}
419
+
420
+ canZoom={true}
421
+ minZoom={minZoom}
422
+ maxZoom={maxZoom}
423
+
424
+ startText={onFormatTimeToolTips(start)}
425
+ stopText={onFormatTimeToolTips(stop)}
426
+
427
+ maxSize={maxTimespan}
428
+
429
+ tools={tools}
430
+
431
+ gotoCursorLabel={this.labels.gotoCursor}
432
+ zoomInLabel={this.labels.zoomInLabel}
433
+ zoomOutLabel={this.labels.zoomOutLabel}
434
+
435
+ zoomIn={this.zoomIn}
436
+ zoomOut={this.zoomOut}
437
+ onResizeLeftCursor={this.onResizeLeftCursor}
438
+ onResizeRightCursor={this.onResizeRightCursor}
439
+ onEndResizeCursor={this.onEndChangeCursor}
440
+ onDragCursor={this.onDragCursor}
441
+ onEndDragCursor={this.onEndChangeCursor}
442
+ onStartDrawCursor={this.onStartDrawCursor}
443
+ onDrawCursor={this.onDrawCursor}
444
+ onEndCursor={this.onEndDrawCursor}
445
+ onMoveDomain={this.moveTimeLine}
446
+ onMovedDomain={this.movedTimeLine}
447
+ onGotoCursor={this.onGotoCursor}
448
+ />
449
+ }
450
+ { isActive && quality && quality.items &&
451
+ <QualityLine
452
+ classes={classes}
453
+ rcToolTipPrefixCls={rcToolTipPrefixCls}
454
+ origin={pointZero}
455
+ quality={quality}
456
+ qualityScale={qualityScale}
457
+ xAxis={this.xAxis}
458
+ />
459
+ }
460
+ </g>
461
+ </svg>
462
+ )
463
+ }
464
+ else{
465
+ return null;
466
+ }
462
467
  }
463
468
 
464
469
  shiftDomains = (domains, {min, max}) => {