diff --git a/d3pie/d3pie-tests.ts b/d3pie/d3pie-tests.ts new file mode 100644 index 0000000000..4d8a38280f --- /dev/null +++ b/d3pie/d3pie-tests.ts @@ -0,0 +1,146 @@ +/// + +let chart = new d3pie('test', + { + header: { + title: { + text: '', + color: '#333333', + fontSize: 18, + font: 'arial' + }, + subtitle: { + color: '#666666', + fontSize: 14, + font: 'arial' + }, + location: 'top-center', + titleSubtitlePadding: 8 + }, + footer: { + text: '', + color: '#666666', + fontSize: 14, + font: 'arial', + location: 'left' + }, + size: { + canvasHeight: 500, + canvasWidth: 500, + pieInnerRadius: 0, + pieOuterRadius: null + }, + data: { + sortOrder: 'none', + smallSegmentGrouping: { + enabled: false, + value: 1, + valueType: 'percentage', + label: 'Other', + color: '#cccccc' + }, + content: [] + }, + labels: { + outer: { + format: 'label', + hideWhenLessThanPercentage: null, + pieDistance: 30 + }, + inner: { + format: 'percentage', + hideWhenLessThanPercentage: null + }, + mainLabel: { + color: '#333333', + font: 'arial', + fontSize: 10 + }, + percentage: { + color: '#dddddd', + font: 'arial', + fontSize: 10, + decimalPlaces: 0 + }, + value: { + color: '#cccc44', + font: 'arial', + fontSize: 10 + }, + lines: { + enabled: true, + style: 'curved', + color: 'segment' // 'segment' or a hex color + } + }, + effects: { + load: { + effect: 'default', // none / default + speed: 1000 + }, + pullOutSegmentOnClick: { + effect: 'bounce', // none / linear / bounce / elastic / back + speed: 300, + size: 10 + }, + highlightSegmentOnMouseover: true, + highlightLuminosity: -0.2 + }, + tooltips: { + enabled: false, + type: 'placeholder', // caption|placeholder + string: '', + placeholderParser: null, + styles: { + fadeInSpeed: 250, + backgroundColor: '#000000', + backgroundOpacity: 0.5, + color: '#efefef', + borderRadius: 2, + font: 'arial', + fontSize: 10, + padding: 4 + } + }, + + misc: { + colors: { + background: null, // transparent + segments: [ + '#2484c1', '#65a620', '#7b6888', '#a05d56', '#961a1a', + '#d8d23a', '#e98125', '#d0743c', '#635222', '#6ada6a', + '#0c6197', '#7d9058', '#207f33', '#44b9b0', '#bca44a', + '#e4a14b', '#a3acb2', '#8cc3e9', '#69a6f9', '#5b388f', + '#546e91', '#8bde95', '#d2ab58', '#273c71', '#98bf6e', + '#4daa4b', '#98abc5', '#cc1010', '#31383b', '#006391', + '#c2643f', '#b0a474', '#a5a39c', '#a9c2bc', '#22af8c', + '#7fcecf', '#987ac6', '#3d3b87', '#b77b1c', '#c9c2b6', + '#807ece', '#8db27c', '#be66a2', '#9ed3c6', '#00644b', + '#005064', '#77979f', '#77e079', '#9c73ab', '#1f79a7' + ], + segmentStroke: '#ffffff' + }, + gradient: { + enabled: false, + percentage: 95, + color: '#000000' + }, + canvasPadding: { + top: 5, + right: 5, + bottom: 5, + left: 5 + }, + pieCenterOffset: { + x: 0, + y: 0 + }, + cssPrefix: null + }, + callbacks: { + onload: null, + onMouseoverSegment: null, + onMouseoutSegment: null, + onClickSegment: null + } + }) \ No newline at end of file diff --git a/d3pie/d3pie.d.ts b/d3pie/d3pie.d.ts new file mode 100644 index 0000000000..2bfe5d6525 --- /dev/null +++ b/d3pie/d3pie.d.ts @@ -0,0 +1,146 @@ +// Type definitions for d3pie 0.1.9 +// Project: https://github.com/benkeen/d3pie +// Definitions by: Petryshyn Sergii +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare namespace d3pie { + interface ID3PieChart { + redraw(): void + openSegment(index: number): void + closeSegment(index: void): void + getOpenSegment(): any + updateProp(propKey: string, value: any): void + destroy(): void + } + + interface ID3PieStyleOptions { + color?: string + fontSize?: number + font?: string + } + + interface ID3PieTextOptions extends ID3PieStyleOptions { + text?: string + } + + interface ID3PieLabelsOptions { + format?: 'label' | 'value' | 'percentage' | 'label-value1' | 'label-value2' | 'label-percentage1' | 'label-percentage2' + hideWhenLessThanPercentage?: number + } + + interface ID3PieOptions { + header?: { + title?: ID3PieTextOptions + subtitle?: ID3PieTextOptions + location?: 'top-center' | 'top-left' | 'pie-center' + titleSubtitlePadding?: number + } + footer?: { location?: 'left' } & ID3PieTextOptions + size?: { + canvasHeight?: number + canvasWidth?: number + pieOuterRadius?: string | number + pieInnerRadius?: string | number + } + data: { + sortOrder?: 'none' | 'random' | 'value-asc' | 'value-desc' | 'label-asc' | 'label-desc' + smallSegmentGrouping?: { + enabled?: boolean + value?: number + valueType?: 'percentage' | 'value' + label?: string + color?: string + } + content: { + label: string + value: number + color?: string + }[] + } + labels?: { + outer?: { pieDistance?: number } & ID3PieLabelsOptions + inner?: ID3PieLabelsOptions + mainLabel?: ID3PieStyleOptions + percentage?: { decimalPlaces?: number } & ID3PieStyleOptions + value?: ID3PieStyleOptions + lines?: { + enabled?: boolean + style?: 'curved' | 'straight' + color?: string + } + truncation?: { + enabled?: boolean + truncateLength?: number + } + formatter?: (context: { + section: 'outer' | 'inner' + value: number + label: string + }) => string + } + effects?: { + load?: { + effect?: 'none' | 'default' + speed?: number + } + pullOutSegmentOnClick?: { + effect?: 'none' | 'linear' | 'bounce' | 'elastic' | 'back' + speed?: number + size?: number + } + highlightSegmentOnMouseover?: boolean + highlightLuminosity?: number + } + tooltips?: { + enabled?: boolean + type?: 'placeholder' | 'caption' + string?: string + placeholderParser?: (index: number, data: { label?: string, percentage?: number, value?: number }) => void + styles?: { + fadeInSpeed?: number + backgroundColor?: string + backgroundOpacity?: number + color?: string + borderRadius?: number + font?: string + fontSize?: number + padding?: number + } + } + misc?: { + colors?: { + background?: string + segments?: string[] + segmentStroke?: string + } + gradient?: { + enabled?: boolean + percentage?: number + color?: string + } + canvasPadding?: { + top?: number + right?: number + bottom?: number + left?: number + } + pieCenterOffset?: { + x?: number + y?: number + } + cssPrefix?: string + } + callbacks?: { + onload?: Function + onMouseoverSegment?: Function + onMouseoutSegment?: Function + onClickSegment?: Function + } + } + + interface ID3PieClass { + new (id: string | HTMLElement, options: ID3PieOptions): ID3PieChart + } +} + +declare const d3pie: d3pie.ID3PieClass \ No newline at end of file