feature: export chart to data url

projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts

@@ -23,6 +23,7 @@ import { isDate } from '../utils/types';
 import { Color } from '../utils/color-sets';
 import { ScaleType } from './types/scale-type.enum';
 import { ViewDimensions } from './types/view-dimension.interface';
+import { toCanvas, toJpeg, toPng, toSvg } from '@swimlane/ngx-charts/utils/data-url';
 
 @Component({
  selector: 'base-chart',
@@ -209,4 +210,60 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
 
  return results;
  }
+
+ get chartEl() {
+ return this.chartElement;
+ }
+
+ toDataURL<T extends 'png' | 'jpg' | 'svg'>(
+ options: {
+ type?: T;
+ canvasOptions?: { pixelRatio?: number; transparentBackground?: boolean; width?: number; height?: number };
+ } = {}
+ ): Promise<string> {
+ if (this.getContainerDims() === null) {
+ // If not browser
+ return null;
+ }
+
+ const chartEl = this.chartElement.nativeElement.firstElementChild;
+
+ let [width, height] = [this.width, this.height];
+ if (isPlatformBrowser(this.platformId)) {
+ const rect = this.chartElement.nativeElement.getBoundingClientRect();
+ width = rect.width;
+ height = rect.height;
+ }
+ const ops = {
+ width,
+ height,
+ ...(options.canvasOptions || {})
+ };
+ const { type } = options;
+ if (type === 'svg') {
+ return toSvg(chartEl, ops);
+ }
+ if (type === 'png') {
+ return toPng(chartEl, ops);
+ }
+ if (type === 'jpg') {
+ return toJpeg(chartEl, ops);
+ }
+
+ throw new Error(`Unable to convert to type ${type}`);
+ }
+
+ toCanvas(options: { pixelRatio?: number; transparentBackground?: boolean }): Promise<HTMLCanvasElement> {
+ if (this.getContainerDims() === null) {
+ // If not browser
+ return null;
+ }
+
+ const ops = {
+ width: this.width,
+ height: this.height,
+ ...options
+ };
+ return toCanvas(this.chartElement.nativeElement.firstElementChild, ops);
+ }
 }

projects/swimlane/ngx-charts/src/lib/common/legend/advanced-legend.component.scss

@@ -1,8 +1,11 @@
 .advanced-pie-legend {
  float: left;
  position: relative;
- top: 50%;
- transform: translate(0, -50%);
+ height: 100%;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: center;
 
  .total-value {
  font-size: 36px;

projects/swimlane/ngx-charts/src/lib/utils/data-url.ts

@@ -0,0 +1,111 @@
+export interface Options {
+ width: number;
+ height: number;
+ pixelRatio?: number;
+ transparentBackground?: boolean;
+}
+
+export interface StyleAble extends Element {
+ style: CSSStyleDeclaration;
+}
+
+function isType<T>(obj: unknown, test: (...args: any[]) => boolean): obj is T {
+ return test(obj);
+}
+
+export function cloneNodeWithStyle<T extends Element>(originNode: T): T {
+ const clonedNode = originNode.cloneNode(false) as T;
+
+ if (isType<StyleAble>(clonedNode, e => e?.style)) {
+ const computedStyle = window.getComputedStyle(originNode);
+ const styleText = Array.from(computedStyle)
+ .map(e => `${e}:${computedStyle.getPropertyValue(e)}`)
+ .join(';');
+ clonedNode.style.cssText = styleText;
+ }
+
+ if (!(originNode instanceof Element)) return clonedNode;
+ const children = Array.from(originNode.childNodes).map(cloneNodeWithStyle);
+ clonedNode.append(...children.filter(e => !!e));
+ return clonedNode;
+}
+
+export function svgToDataURL(svg: SVGElement): Promise<string> {
+ return Promise.resolve(new XMLSerializer().serializeToString(svg))
+ .then(encodeURIComponent)
+ .then(html => `data:image/svg+xml;charset=utf-8,${html}`);
+}
+
+export function nodeToDataURL(node: Element, options: Options): Promise<string> {
+ const { width, height } = options;
+ const xmlns = 'http://www.w3.org/2000/svg';
+ const svg = document.createElementNS(xmlns, 'svg');
+ const foreignObject = document.createElementNS(xmlns, 'foreignObject');
+
+ svg.setAttribute('width', `${width}`);
+ svg.setAttribute('height', `${height}`);
+ svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+
+ foreignObject.setAttribute('width', '100%');
+ foreignObject.setAttribute('height', '100%');
+ foreignObject.setAttribute('x', '0');
+ foreignObject.setAttribute('y', '0');
+ foreignObject.setAttribute('externalResourcesRequired', 'true');
+
+ svg.appendChild(foreignObject);
+ foreignObject.appendChild(node);
+ return svgToDataURL(svg);
+}
+
+export async function toSvg<T extends HTMLElement>(node: T, options: Options): Promise<string> {
+ return nodeToDataURL(cloneNodeWithStyle(node), options);
+}
+
+export async function toPng<T extends HTMLElement>(node: T, options: Options): Promise<string> {
+ const canvas = await toCanvas(node, options);
+ return canvas.toDataURL();
+}
+
+export async function toJpeg<T extends HTMLElement>(node: T, options: Options): Promise<string> {
+ const canvas = await toCanvas(node, options);
+ return canvas.toDataURL('image/jpeg');
+}
+
+export function createImage(url: string): Promise<HTMLImageElement> {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = reject;
+ img.crossOrigin = 'anonymous';
+ img.decoding = 'async';
+ img.src = url;
+ img.decode().then(() => resolve(img));
+ });
+}
+
+export async function toCanvas<T extends HTMLElement>(node: T, options: Options): Promise<HTMLCanvasElement> {
+ const svg = await toSvg(node, options);
+ const img = await createImage(svg);
+
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d')!;
+ const ratio = options.pixelRatio || window.devicePixelRatio;
+ const canvasWidth = options.width;
+ const canvasHeight = options.height;
+
+ canvas.width = canvasWidth * ratio;
+ canvas.height = canvasHeight * ratio;
+
+ canvas.style.width = `${canvasWidth}`;
+ canvas.style.height = `${canvasHeight}`;
+
+ if (!options.transparentBackground) {
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ context.fillStyle = '#fff';
+ context.fillRect(0, 0, canvas.width, canvas.height);
+ }
+
+ context.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+ return canvas;
+}