Parameters

• value: A stringified JSON object of type ChartDataModel.
• language: A value of type LanguageTypes.

Usage

Add Script to HTML Header

Add the following script to your HTML header:

<script type="module" src="https://unpkg.com/[email protected]/dist/assets/index.js" crossorigin></script>

<verigor-snail-chart value="Stringified Object"></verigor-snail-chart>

Use in a React.js App

To use verigor-snail-chart in a React.js application:

1. Install the package:

   npm install verigor-snail-chart

2. Import the package in your React component:

   import 'verigor-snail-chart';

3. Use the custom element in your JSX:

   <verigor-snail-chart value="Stringified Object"></verigor-snail-chart>

TypeScript Support

For TypeScript support, create a global types file (e.g., types.d.ts) and add:

declare namespace JSX {
  interface IntrinsicElements {
    'verigor-snail-chart': React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    > & {
      value?: string;
      language?: string;
    };
  }
}

Models

The ChartDataModel and related types:

type LabelModel = {
  label: string;
  option: string;
};

type ChartDataModel = {
  name: string;
  value: number;
  labels?: LabelModel[];
};

enum LanguageTypes {
  EN = "en",
  TR = "tr",
}