Merge pull request #9545 from mc-petry/d3pie

D3pie
2026-08-12 04:50:18 +00:00 · 2016-06-20 15:51:10 -07:00
parent 7b8b3f9f8d 7b94290975
commit 118231904c
2 changed files with 292 additions and 0 deletions
@@ -0,0 +1,146 @@
+/// <reference path='d3pie.d.ts' />
+
+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
+    }
+  })
@@ -0,0 +1,146 @@
+// Type definitions for d3pie 0.1.9
+// Project: https://github.com/benkeen/d3pie
+// Definitions by: Petryshyn Sergii <https://github.com/mc-petry>
+// 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