Chart Sharing Provider

ChartSharingProvider is a way to share user's chart screenshots with other people across the Internet.

ChartSharingProvider is only provides you a Blob with the screenshot of the chart. You can then operate with this Blob as you want.

Basically, for an integration you need to use/implement some image hosting service, that will store given Blob and give you an URL for that Blob in turn, which then can be used by users to access the screenshot.

How it works

import { ChartSharingProvider, UploadResult } from '@dx-private/dxchart5-react/dist/providers/chart-sharing-provider';
/**
 * Creates mock implementation of {@link ChartSharingProvider}.
 */
export function createMockChartSharingProvider(): ChartSharingProvider {
    /**
     * For mock purposes there's no image service to upload a snapshot to generate a URL.
     * Therefore we just encode image blob via URL.createObjectURL(blob) and return the result.
     * It is not a real URL, but it can be used for demo purposes.
     *
     * NOTE: You can use any image hosting service you want here or implement your own.
     */
    const uploadChartSnapshot = (blob: Blob): Promise<UploadResult> => {
        return new Promise<UploadResult>(resolve =>
            resolve({
                url: URL.createObjectURL(blob),
            }),
        );
    };
    return {
        uploadChartSnapshot,
    };
}

The following example shows a complete implementation of a Chart Sharing Provider that uploads chart screenshots to a server. This provider:

Uploads chart screenshots as Blob objects via FormData POST request
Returns shareable URLs that can be used to access the uploaded images
Handles special cases - includes port override for Twitter sharing if needed
Uses configurable endpoint - allows custom upload URL

import {
    ChartSharingProvider,
    DefaultUploadOptions,
    UploadResult,
} from '@dx-private/dxchart5-react/dist/providers/chart-sharing-provider';
/**
 * Example: Chart Sharing Provider implementation
 * 
 * This provider handles uploading chart screenshots to a server and returns shareable URLs.
 * It implements:
 * - uploadChartSnapshot: uploads a Blob (chart screenshot) and returns a URL
 * 
 * IMPORTANT FOR YOUR IMPLEMENTATION:
 * - The chart provides a Blob (image file) - you need to upload it to your server
 * - Return the public URL where the image can be accessed
 * - Handle errors gracefully - return empty URL or throw (chart will handle it)
 * 
 * The provider includes:
 * - FormData upload via POST request
 * - Special handling for Twitter sharing (port override)
 * - Error handling
 */
interface WebdevChartSharingProviderProps {
    endpointUrl?: string;
}
const SNAPSHOT_URL = 'https://webdev-new.prosp.devexperts.com:8095/api/snapshot';
/**
 * Creates a Chart Sharing Provider that uploads screenshots to a server
 * 
 * ADAPTATION GUIDE FOR YOUR API:
 * 
 * 1. Replace endpoint URL with your image hosting service
 * 2. Adapt authentication to your method (API key, OAuth, etc.)
 * 3. Adapt request format to your service (FormData, base64, etc.)
 * 4. Return public URL where image can be accessed
 * 5. Handle errors - either return empty URL or throw (chart handles both)
 * 
 * @param props - Configuration with optional endpoint URL
 * @returns ChartSharingProvider instance
 */
export function createWebdevChartSharingProvider({
    endpointUrl = SNAPSHOT_URL,
}: WebdevChartSharingProviderProps = {}): ChartSharingProvider {
    /**
     * uploadChartSnapshot: Called when user wants to share chart screenshot
     * 
     * Requirements:
     * - Accept Blob (image file) and optional DefaultUploadOptions
     * - Return Promise<UploadResult> with public URL
     * - URL must be accessible from the internet
     * - Handle errors gracefully (return empty URL or throw)
     * 
     * The options parameter can contain:
     * - target: 'twitter' | 'facebook' | etc. (for platform-specific handling)
     */
    const uploadChartSnapshot = (blob: Blob, options?: DefaultUploadOptions): Promise<UploadResult> => {
        const formData = new FormData();
        formData.append('image', blob);
        return fetch(`${endpointUrl}/`, {
            method: 'POST',
            body: formData,
        })
            .then(res => {
                if (!res.ok) {
                    throw new Error(`Upload failed: ${res.status}`);
                }
                return res.text();
            })
            .then(url => {
                // Special handling for Twitter sharing - override port if needed
                // This is specific to this demo server - you probably don't need this
                if (options && options.target === 'twitter') {
                    const urlObj = new URL(url);
                    urlObj.port = '8095';
                    const forced8095Port = urlObj.toString();
                    return { url: forced8095Port };
                }
                return { url };
            })
            .catch(error => {
                // You can either throw (chart will show error) or return empty URL
                console.error('Failed to upload chart snapshot:', error);
                throw error; // Or return { url: '' } for silent failure
            });
    };
    return {
        uploadChartSnapshot,
    };
}

Key features

FormData upload: Uses FormData to upload Blob as multipart/form-data (standard approach)
Twitter support: Special handling for Twitter sharing with port override (optional, adapt to your needs)
Configurable endpoint: Allows custom endpoint URL via props (recommended)
Simple interface: Returns URL string in UploadResult (required format)
Error handling: Can throw or return empty URL - chart handles both (see code comments)

API reference