ks-widget

Smart component that uses an adapter to fetch data, passes it to the corresponding mapper to transform it, and picks the right component for the catalog to use the corresponding visualization and card wrapper.

Usage

npm install @ks-web-components/ks-widget

Live Example

Attributes

export interface GraphqlAdapterProps {
  config: {
    clientUrl: string
    queryString: string
  }
  tag: 'ks-graphql-adapter'
}

export interface StaticAdapterProps {
  config: {
    data: unknown
  }
  tag: 'ks-static-adapter'
}

export type AdapterProps = GraphqlAdapterProps | StaticAdapterProps

export interface DataMapperProps {
  config: DataMapperConfig
  tag: 'ks-data-mapper'
}

export interface HighchartsMapperProps {
  config: {
    prefix?: string
    seriesGroup?: LeafData
    x?: LeafData
    y?: LeafData
  }
  preset: string
  tag: 'ks-highcharts-mapper'
}

export type MapperProps = DataMapperProps | HighchartsMapperProps

export interface ContentProps {
  properties: Record<string, unknown>
  tag: string
}

export interface WidgetProps {
  name: string
  adapter?: AdapterProps
  mapper?: MapperProps
  content: ContentProps
}

| Property | Attribute | Type | Default | Description | | -------- | --------- | ------------ | -------------------------------------------------- | ------------------------------------------------------------ | | data | data | JSON | | Data to inject to the content | | content | content | ContentProps | | Which component to use from the catalog and their properties | | mapper | mapper | MapperProps | | Possible configuration and tag for the mapper | | adapter | adapter | AdapterProps | { tag: 'ks-static-adapter', config: { data: [] } } | Possible configuration and tag for the adapter |

Element API

| Name | Description | | ------------- | ------------------------------------- | | refresh | Refresh the content of the component | | resize | Resize the card | | setLoading | Update the loding state of the widget | | setContentTag | Change the content tag property |