Added chart title option and handle container resize
This commit is contained in:
Violet Voronetzky
Родитель
139d90c9a7
Коммит
3ebf3a1c45
|
|
@ -50,6 +50,7 @@ chartHelper.draw(queryResultData, chartOptions);
|
|||
| maxUniqueXValues | number | The maximum number of the unique X-axis values.<br>The chart will show the biggest values, and the rest will be aggregated to a separate data point.| 100 |
|
||||
| exceedMaxDataPointLabel| string | The label of the data point that contains the aggregated value of all the X-axis values that exceed the 'maxUniqueXValues'.| 'OTHER' |
|
||||
| aggregationType | [AggregationType](#AggregationType) | Multiple rows with the same values for the X-axis and the split-by will be aggregated using a function of this type.<br>For example, assume we get the following query result data:<br>['2016-08-02T10:00:00Z', 'Chrome 51.0', 15], <br>['2016-08-02T10:00:00Z', 'Internet Explorer 9.0', 4]<br>When drawing a chart with columnsSelection = { xAxis: timestamp, yAxes: count_ }, and aggregationType = AggregationType.Sum we need to aggregate the values of the same timestamp value and return one row with ["2016-08-02T10:00:00Z", 19] | AggregationType.Sum |
|
||||
| title | string | The title of the chart | |
|
||||
| utcOffset | number | The desired offset from UTC in hours for date values. Used to handle timezone.<br>The offset will be added to the original date from the query results data.<br>For example:<br>For 'Africa/Harare'timezone provide utcOffset = 2 and the displayed date will be be:<br>'11/25/2019, 2:00 AM' instead of '11/25/2019, 12:00 AM' <br>See time zone [info](https://msdn.microsoft.com/en-us/library/ms912391(v=winembedded.11)| 0 |
|
||||
| chartTheme |[ChartTheme](#ChartTheme)| The theme of the chart | ChartTheme.Light |
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,12 @@ export interface IChartOptions {
|
|||
* [Default value: AggregationType.Sum]
|
||||
*/
|
||||
aggregationType?: AggregationType;
|
||||
|
||||
|
||||
/**
|
||||
* The chart's title
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* The theme of the chart
|
||||
* [Default value: ChartTheme.Light]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
Copyright (c) 2013 Marc J. Schmidt
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
|
||||
* directory of this distribution and at
|
||||
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
|
||||
*/
|
||||
export class ResizeSensor {
|
||||
private element: Element;
|
||||
private callback: () => void;
|
||||
private currentWidth: number;
|
||||
private currentHeight: number;
|
||||
private expand: HTMLDivElement;
|
||||
private shrink: HTMLDivElement;
|
||||
|
||||
public constructor(element: Element, callback: () => void) {
|
||||
this.element = element;
|
||||
this.callback = callback;
|
||||
let zIndex: any = window.document.defaultView.getComputedStyle(element).getPropertyValue('z-index');
|
||||
|
||||
if(isNaN(zIndex)) {
|
||||
zIndex = 0;
|
||||
};
|
||||
|
||||
zIndex--;
|
||||
|
||||
this.expand = document.createElement('div');
|
||||
this.expand.style.position = 'absolute';
|
||||
this.expand.style.left = '0px';
|
||||
this.expand.style.top = '0px';
|
||||
this.expand.style.right = '0px';
|
||||
this.expand.style.bottom = '0px';
|
||||
this.expand.style.overflow = 'hidden';
|
||||
this.expand.style.zIndex = zIndex.toString();
|
||||
this.expand.style.visibility = 'hidden';
|
||||
|
||||
let expandChild = document.createElement('div');
|
||||
expandChild.style.position = 'absolute';
|
||||
expandChild.style.left = '0px';
|
||||
expandChild.style.top = '0px';
|
||||
expandChild.style.width = '10000000px';
|
||||
expandChild.style.height = '10000000px';
|
||||
this.expand.appendChild(expandChild);
|
||||
|
||||
this.shrink = document.createElement('div');
|
||||
this.shrink.style.position = 'absolute';
|
||||
this.shrink.style.left = '0px';
|
||||
this.shrink.style.top = '0px';
|
||||
this.shrink.style.right = '0px';
|
||||
this.shrink.style.bottom = '0px';
|
||||
this.shrink.style.overflow = 'hidden';
|
||||
this.shrink.style.zIndex = zIndex;
|
||||
this.shrink.style.visibility = 'hidden';
|
||||
|
||||
let shrinkChild = document.createElement('div');
|
||||
shrinkChild.style.position = 'absolute';
|
||||
shrinkChild.style.left = '0px';
|
||||
shrinkChild.style.top = '0px';
|
||||
shrinkChild.style.width = '200%';
|
||||
shrinkChild.style.height = '200%';
|
||||
this.shrink.appendChild(shrinkChild);
|
||||
|
||||
element.appendChild(this.expand);
|
||||
element.appendChild(this.shrink);
|
||||
|
||||
this.setScroll();
|
||||
|
||||
let size = element.getBoundingClientRect();
|
||||
|
||||
this.currentWidth = size.width;
|
||||
this.currentHeight = size.height;
|
||||
|
||||
this.expand.addEventListener('scroll', this.onScroll);
|
||||
this.shrink.addEventListener('scroll', this.onScroll);
|
||||
}
|
||||
|
||||
private setScroll = () => {
|
||||
this.expand.scrollLeft = 10000000;
|
||||
this.expand.scrollTop = 10000000;
|
||||
this.shrink.scrollLeft = 10000000;
|
||||
this.shrink.scrollTop = 10000000;
|
||||
}
|
||||
|
||||
private onScroll = () => {
|
||||
let size = this.element.getBoundingClientRect();
|
||||
let newWidth = size.width;
|
||||
let newHeight = size.height;
|
||||
|
||||
if(newWidth != this.currentWidth || newHeight != this.currentHeight)
|
||||
{
|
||||
this.currentWidth = newWidth;
|
||||
this.currentHeight = newHeight;
|
||||
this.callback();
|
||||
}
|
||||
|
||||
this.setScroll();
|
||||
};
|
||||
}
|
||||
|
|
@ -59,6 +59,9 @@ export abstract class Chart {
|
|||
type: chartTypeOptions.chartType
|
||||
},
|
||||
plotOptions: chartTypeOptions.plotOptions,
|
||||
title: {
|
||||
text: chartOptions.title
|
||||
},
|
||||
xAxis: {
|
||||
type: isDatetimeAxis ? 'datetime' : undefined,
|
||||
categories: categoriesAndSeries.categories,
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@
|
|||
//#region Imports
|
||||
|
||||
import * as _ from 'lodash';
|
||||
import * as Highcharts from 'highcharts';
|
||||
import { Chart } from './charts/chart';
|
||||
import { IVisualizer } from '../IVisualizer';
|
||||
import { IVisualizerOptions } from '../IVisualizerOptions';
|
||||
import { ChartFactory } from './charts/chartFactory';
|
||||
import { ChartTheme } from '../../common/chartModels';
|
||||
import { Themes } from './themes/themes';
|
||||
import { ResizeSensor } from '../../external/css-element-queries/resizeSensor';
|
||||
|
||||
//#endregion Imports
|
||||
|
||||
|
|
@ -21,6 +20,13 @@ export class HighchartsVisualizer implements IVisualizer {
|
|||
|
||||
// Draw the chart
|
||||
this.currentChart.draw();
|
||||
|
||||
// Highcharts handle resize only on window resize, we need to handle resize when the chart's container size changes
|
||||
const chartContainer = document.querySelector('#' + options.elementId);
|
||||
|
||||
new ResizeSensor(chartContainer, () => {
|
||||
this.currentChart.highchartsChart.reflow();
|
||||
});
|
||||
}
|
||||
|
||||
public changeTheme(newTheme: ChartTheme): void {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче