Skip to content

Commit

Permalink
RELATED: FET-69 Add TS types
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivan-nejezchleb
Peter Lacko authored and ivan-nejezchleb committed May 9, 2018
1 parent 0496e5a commit 265fda1
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 78 deletions.
9 changes: 6 additions & 3 deletions src/components/visualizations/Visualization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import isEqual = require('lodash/isEqual');
import noop = require('lodash/noop');
import isFunction = require('lodash/isFunction');
import omitBy = require('lodash/omitBy');
import { Highcharts, IChartConfig } from './chart/Chart';

// TODO: will be ported later
import {
Expand All @@ -22,7 +21,11 @@ import {
stringifyChartTypes
} from './utils/common';

import ChartTransformation, { IExecutionRequest, IDrillableItems, renderHighCharts } from './chart/ChartTransformation';
import { Highcharts, IChartConfig } from './chart/Chart';

import { IDrillableItem } from '../../interfaces/DrillEvents';

import ChartTransformation, { IExecutionRequest, renderHighCharts } from './chart/ChartTransformation';

export interface IVisualizationProps {
height: number;
Expand All @@ -33,7 +36,7 @@ export interface IVisualizationProps {
executionRequest: IExecutionRequest;
executionResponse: Execution.IExecutionResponse;
executionResult: Execution.IExecutionResult;
drillableItems: IDrillableItems[];
drillableItems: IDrillableItem[];

onFiredDrillEvent(): void;
afterRender(): void;
Expand Down
12 changes: 8 additions & 4 deletions src/components/visualizations/chart/Chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
import isEqual = require('lodash/isEqual');
import noop = require('lodash/noop');
import * as React from 'react';
import { VisualizationObject } from '@gooddata/typings';
import { initChartPlugins } from './highcharts/chartPlugins';
import { ChartType } from '../../../constants/visualizationTypes';

// Have only one entrypoint to highcharts and drill module
// tslint:disable-next-line
Expand Down Expand Up @@ -32,16 +34,18 @@ export interface IChartLimits {

export interface IChartConfig {
colors?: string[];
type?: string;
type?: ChartType;
legend?: ILegendConfig;
legendLayout?: string;
limits?: IChartLimits;
stacking?: boolean;
grid?: any;
mdObject?: any;
mdObject?: VisualizationObject.IVisualizationObjectContent;
yFormat?: string;
yLabel?: string;
xLabel?: string;
xFormat?: string;
chart?: any;
}

export interface IChartProps {
Expand Down Expand Up @@ -88,15 +92,15 @@ export default class Chart extends React.Component<IChartProps> {
this.chartRef = ref;
}

public getChart() {
public getChart(): Highcharts.ChartObject {
if (!this.chart) {
throw new Error('getChart() should not be called before the component is mounted');
}

return this.chart;
}

public createChart(config: any) {
public createChart(config: IChartConfig) {
const chartConfig = config.chart;
this.chart = new Highcharts.Chart(
{
Expand Down
33 changes: 18 additions & 15 deletions src/components/visualizations/chart/ChartTransformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import * as invariant from 'invariant';
import noop = require('lodash/noop');
import {
AFM,
Execution
Execution,
VisualizationObject
} from '@gooddata/typings';

import { getChartOptions, validateData } from './chartOptionsBuilder';
Expand All @@ -16,38 +17,35 @@ import HighChartsRenderer, {
renderChart as chartRenderer
} from './HighChartsRenderer';
import { IChartConfig } from './Chart';
import { OnLegendReady } from '../../../interfaces/Events';
import { IDrillableItem } from '../../../interfaces/DrillEvents';

export function renderHighCharts(props: IHighChartsRendererProps) {
return <HighChartsRenderer {...props} />;
}

export interface IDrillableItems {
identifier: string;
uri: string;
}

export interface IExecutionRequest {
afm: AFM.IAfm;
resultSpec: AFM.IResultSpec;
}

export interface IChartTransformationProps {
config: IChartConfig;
drillableItems: IDrillableItems[];
drillableItems: IDrillableItem[];
height: number;
width: number;

executionRequest: IExecutionRequest;
executionResponse: Execution.IExecutionResponse;
executionResult: Execution.IExecutionResult;
mdObject?: any;
mdObject?: VisualizationObject.IVisualizationObjectContent;

onLegendReady: OnLegendReady;
afterRender(): void;
renderer(arg: IHighChartsRendererProps): JSX.Element;
onDataTooLarge(): void;
onNegativeValues(): void;
onDataTooLarge(chartOptions: any): void;
onNegativeValues(chartOptions: any): void;
onFiredDrillEvent(): void;
onLegendReady(): void;
}

export interface IChartTransformationState {
Expand All @@ -57,7 +55,7 @@ export interface IChartTransformationState {

export default class ChartTransformation extends React.Component<IChartTransformationProps, IChartTransformationState> {
public static defaultProps = {
drillableItems: [] as any,
drillableItems: [] as IDrillableItem[],
renderer: renderHighCharts,
afterRender: noop,
onNegativeValues: null as any,
Expand All @@ -73,7 +71,7 @@ export default class ChartTransformation extends React.Component<IChartTransform
this.assignChartOptions(this.props);
}

public componentWillReceiveProps(nextProps: any) {
public componentWillReceiveProps(nextProps: IChartTransformationProps) {
this.assignChartOptions(nextProps);
}

Expand Down Expand Up @@ -102,7 +100,7 @@ export default class ChartTransformation extends React.Component<IChartTransform
};
}

public assignChartOptions(props: any) {
public assignChartOptions(props: IChartTransformationProps) {
const {
drillableItems,
executionRequest: { afm, resultSpec },
Expand All @@ -113,11 +111,16 @@ export default class ChartTransformation extends React.Component<IChartTransform
onNegativeValues
} = props;

let multiDimensionalData = data;
if (data[0].constructor !== Array) {
multiDimensionalData = [data] as Execution.DataValue[][];
}

this.chartOptions = getChartOptions(
afm,
resultSpec,
dimensions,
data,
multiDimensionalData as Execution.DataValue[][],
headerItems,
config,
drillableItems
Expand Down
35 changes: 20 additions & 15 deletions src/components/visualizations/chart/HighChartsRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,38 @@ import isEqual = require('lodash/isEqual');
import noop = require('lodash/noop');
import partial = require('lodash/partial');
import * as cx from 'classnames';
import Chart from './Chart';
import Legend from './legend/Legend';
import Chart, { IChartConfig, IChartProps } from './Chart';
import Legend, { ILegendProps } from './legend/Legend';
import { TOP, LEFT, BOTTOM, RIGHT } from './legend/PositionTypes';
import { isPieOrDonutChart, isTreemap } from '../utils/common';
import { VisualizationTypes } from '../../../constants/visualizationTypes';
import { OnLegendReady } from '../../../interfaces/Events';

export interface IChartHTMLElement extends HTMLElement {
getChart(): Highcharts.ChartObject;
}

export interface IHighChartsRendererProps {
chartOptions: any;
hcOptions: any;
height: number;
width: number;
legend: any;
legendRenderer(legendProps: any): void;
chartRenderer(chartProps: any): void;
onLegendReady: OnLegendReady;
legendRenderer(legendProps: ILegendProps): any;
chartRenderer(chartProps: IChartProps): any;
afterRender(): void;
onLegendReady(legendItems: any): void;
}

export interface IHighChartsRendererState {
legendItemsEnabled: boolean[];
}

export function renderChart(props: any) {
export function renderChart(props: IChartProps) {
return <Chart {...props} />;
}

export function renderLegend(props: any) {
export function renderLegend(props: ILegendProps) {
return <Legend {...props} />;
}

Expand All @@ -48,7 +53,7 @@ export default class HighChartsRenderer
extends React.PureComponent<IHighChartsRendererProps, IHighChartsRendererState> {
public static defaultProps = {
afterRender: noop,
height: null as any,
height: null as number,
legend: {
enabled: true,
responsive: false,
Expand All @@ -59,9 +64,9 @@ export default class HighChartsRenderer
onLegendReady: noop
};

private chartRef: any;
private chartRef: IChartHTMLElement;

constructor(props: any) {
constructor(props: IHighChartsRendererProps) {
super(props);
this.state = {
legendItemsEnabled: []
Expand All @@ -80,7 +85,7 @@ export default class HighChartsRenderer
if (this.chartRef) {
const chart = this.chartRef.getChart();

chart.container.style.height = this.props.height || '100%';
chart.container.style.height = (this.props.height && String(this.props.height)) || '100%';
chart.container.style.position = this.props.height ? 'relative' : 'absolute';

chart.reflow();
Expand All @@ -92,7 +97,7 @@ export default class HighChartsRenderer
});
}

public componentWillReceiveProps(nextProps: any) {
public componentWillReceiveProps(nextProps: IHighChartsRendererProps) {
const thisLegendItems = get(this.props, 'legend.items', []);
const nextLegendItems = get(nextProps, 'legend.items', []);
const hasLegendChanged = !isEqual(thisLegendItems, nextLegendItems);
Expand All @@ -117,7 +122,7 @@ export default class HighChartsRenderer
});
}

public setChartRef(chartRef: any) {
public setChartRef(chartRef: IChartHTMLElement) {
this.chartRef = chartRef;
}

Expand Down Expand Up @@ -148,7 +153,7 @@ export default class HighChartsRenderer
});
}

public createChartConfig(chartConfig: any, legendItemsEnabled: any) {
public createChartConfig(chartConfig: any, legendItemsEnabled: any): IChartConfig {
const config: any = cloneDeep(chartConfig);
const { yAxis } = config;

Expand Down Expand Up @@ -181,7 +186,7 @@ export default class HighChartsRenderer
const { items } = legend;

if (!legend.enabled) {
return false;
return null;
}

let { type } = chartOptions;
Expand Down
Loading

0 comments on commit 265fda1

Please sign in to comment.