diff --git a/src/plugins/d3/examples/area/Basic.tsx b/src/plugins/d3/examples/area/Basic.tsx index 9e5915ed..fe9fc75f 100644 --- a/src/plugins/d3/examples/area/Basic.tsx +++ b/src/plugins/d3/examples/area/Basic.tsx @@ -2,36 +2,22 @@ import React from 'react'; import {ChartKit} from '../../../../components/ChartKit'; import type {ChartKitWidgetData, AreaSeries, AreaSeriesData} from '../../../../types'; import nintendoGames from '../nintendoGames'; -import {dateTime} from '@gravity-ui/date-utils'; function prepareData(): AreaSeries[] { const games = nintendoGames.filter((d) => { - return d.date && d.user_score; + return d.date && d.user_score && d.genres.includes('Puzzle'); }); - const byGenre = (genre: string) => { - return games - .filter((d) => d.genres.includes(genre)) - .map((d) => { - return { - x: d.date, - y: d.user_score, - label: `${d.title} (${d.user_score})`, - custom: d, - }; - }) as AreaSeriesData[]; - }; - return [ { - name: 'Strategy', - type: 'area', - data: byGenre('Strategy'), - }, - { - name: 'Shooter', + name: 'User score', type: 'area', - data: byGenre('Shooter'), + data: games.map((d) => { + return { + x: Number(d.date), + y: Number(d.user_score), + }; + }), }, ]; } @@ -40,44 +26,14 @@ export const Basic = () => { const series = prepareData(); const widgetData: ChartKitWidgetData = { + title: { + text: 'User score (puzzle genre)', + }, series: { data: series, }, - yAxis: [ - { - title: { - text: 'User score', - }, - }, - ], xAxis: { type: 'datetime', - title: { - text: 'Release dates', - }, - }, - tooltip: { - renderer: (d) => { - const point = d.hovered[0]?.data as AreaSeriesData; - - if (!point) { - return null; - } - - const title = point.custom.title; - const score = point.custom.user_score; - const date = dateTime({input: point.custom.date}).format('DD MMM YYYY'); - - return ( - - {title} -
- Release date: {date} -
- User score: {score} - - ); - }, }, }; diff --git a/src/plugins/d3/renderer/hooks/useSeries/constants.ts b/src/plugins/d3/renderer/hooks/useSeries/constants.ts index ec15021e..40377902 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/constants.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/constants.ts @@ -1,4 +1,5 @@ -import {BaseTextStyle} from '../../../../../types'; +import type {BaseTextStyle} from '../../../../../types'; +import type {PointMarkerHalo} from '../../../../../types/widget-data/marker'; export const DEFAULT_LEGEND_SYMBOL_SIZE = 8; @@ -11,3 +12,9 @@ export const DEFAULT_DATALABELS_STYLE: BaseTextStyle = { fontWeight: 'bold', fontColor: 'var(--d3-data-labels)', }; + +export const DEFAULT_HALO_OPTIONS: Required = { + enabled: true, + opacity: 0.25, + radius: 10, +}; diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepare-area.ts b/src/plugins/d3/renderer/hooks/useSeries/prepare-area.ts index 599fdd76..51bb660b 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/prepare-area.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/prepare-area.ts @@ -5,7 +5,11 @@ import merge from 'lodash/merge'; import {ChartKitWidgetSeriesOptions, AreaSeries} from '../../../../../types'; import {PreparedAreaSeries, PreparedLegend} from './types'; -import {DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE} from './constants'; +import { + DEFAULT_DATALABELS_PADDING, + DEFAULT_DATALABELS_STYLE, + DEFAULT_HALO_OPTIONS, +} from './constants'; import {getRandomCKId} from '../../../../../utils'; import {getSeriesStackId, prepareLegendSymbol} from './utils'; @@ -39,11 +43,7 @@ function prepareMarker(series: AreaSeries, seriesOptions?: ChartKitWidgetSeriesO radius: markerNormalState.radius, borderWidth: 1, borderColor: '#ffffff', - halo: { - enabled: true, - opacity: 0.25, - radius: 10, - }, + halo: DEFAULT_HALO_OPTIONS, }; return { @@ -57,6 +57,7 @@ function prepareMarker(series: AreaSeries, seriesOptions?: ChartKitWidgetSeriesO export function prepareArea(args: PrepareAreaSeriesArgs) { const {colorScale, series: seriesList, seriesOptions, legend} = args; const defaultAreaWidth = get(seriesOptions, 'area.lineWidth', DEFAULT_LINE_WIDTH); + const defaultOpacity = get(seriesOptions, 'area.opacity', 0.75); return seriesList.map((series) => { const id = getRandomCKId(); @@ -66,6 +67,7 @@ export function prepareArea(args: PrepareAreaSeriesArgs) { const prepared: PreparedAreaSeries = { type: series.type, color, + opacity: get(series, 'opacity', defaultOpacity), lineWidth: get(series, 'lineWidth', defaultAreaWidth), name, id, diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts b/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts index 5e7ac7cb..c1d7fc9e 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts @@ -13,6 +13,7 @@ import {PreparedLineSeries, PreparedLegend, PreparedLegendSymbol} from './types' import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, + DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, } from './constants'; import {getRandomCKId} from '../../../../../utils'; @@ -63,11 +64,7 @@ function prepareMarker(series: LineSeries, seriesOptions?: ChartKitWidgetSeriesO radius: markerNormalState.radius, borderWidth: 1, borderColor: '#ffffff', - halo: { - enabled: true, - opacity: 0.25, - radius: 10, - }, + halo: DEFAULT_HALO_OPTIONS, }; return { diff --git a/src/plugins/d3/renderer/hooks/useSeries/types.ts b/src/plugins/d3/renderer/hooks/useSeries/types.ts index e9d6dd16..e282ac12 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/types.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/types.ts @@ -163,6 +163,7 @@ export type PreparedAreaSeries = { stacking: AreaSeries['stacking']; stackId: string; lineWidth: number; + opacity: number; dataLabels: { enabled: boolean; style: BaseTextStyle; diff --git a/src/plugins/d3/renderer/hooks/useShapes/area/prepare-data.ts b/src/plugins/d3/renderer/hooks/useShapes/area/prepare-data.ts index f7adb7df..5f35288e 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/area/prepare-data.ts +++ b/src/plugins/d3/renderer/hooks/useShapes/area/prepare-data.ts @@ -129,7 +129,7 @@ export const prepareAreaData = (args: { markers, labels, color: s.color, - opacity: 0.5, + opacity: s.opacity, width: s.lineWidth, series: s, hovered: false, diff --git a/src/types/widget-data/area.ts b/src/types/widget-data/area.ts index 8a77afcf..28884611 100644 --- a/src/types/widget-data/area.ts +++ b/src/types/widget-data/area.ts @@ -33,7 +33,7 @@ export type AreaSeries = BaseSeries & { /** The name of the series (used in legend, tooltip etc) */ name: string; /** Whether to stack the values of each series on top of each other. - * Possible values are undefined to disable, "normal" to stack by value or "percent" + * Possible values are undefined to disable, "normal" to stack by value * * @default undefined * */ @@ -42,6 +42,11 @@ export type AreaSeries = BaseSeries & { stackId?: string; /** The main color of the series (hex, rgba) */ color?: string; + /** Fill opacity for the area + * + * @default 0.75 + * */ + opacity?: number; /** Pixel width of the graph line. * * @default 1 diff --git a/src/types/widget-data/marker.ts b/src/types/widget-data/marker.ts index c0535db3..efd72757 100644 --- a/src/types/widget-data/marker.ts +++ b/src/types/widget-data/marker.ts @@ -8,3 +8,12 @@ export type PointMarkerOptions = { /** The width of the point marker's border */ borderWidth?: number; }; + +export type PointMarkerHalo = { + /** Enable or disable the halo appearing around the point */ + enabled?: boolean; + /** The Opacity of the point halo */ + opacity?: number; + /** The radius of the point halo */ + radius?: number; +}; diff --git a/src/types/widget-data/series.ts b/src/types/widget-data/series.ts index f9f8745c..ec9b40a8 100644 --- a/src/types/widget-data/series.ts +++ b/src/types/widget-data/series.ts @@ -4,7 +4,7 @@ import type {ScatterSeries, ScatterSeriesData} from './scatter'; import type {BarXSeries, BarXSeriesData} from './bar-x'; import type {LineSeries, LineSeriesData, LineMarkerOptions} from './line'; import type {BarYSeries, BarYSeriesData} from './bar-y'; -import type {PointMarkerOptions} from './marker'; +import type {PointMarkerOptions, PointMarkerHalo} from './marker'; import type {AreaSeries, AreaSeriesData} from './area'; export type ChartKitWidgetSeries = @@ -166,11 +166,7 @@ export type ChartKitWidgetSeriesOptions = { hover?: BasicHoverState & { marker?: PointMarkerOptions & { /** Options for the halo appearing around the hovered point */ - halo?: { - enabled?: boolean; - opacity?: number; - radius?: number; - }; + halo?: PointMarkerHalo; }; }; inactive?: BasicInactiveState; @@ -189,11 +185,7 @@ export type ChartKitWidgetSeriesOptions = { hover?: BasicHoverState & { marker?: PointMarkerOptions & { /** Options for the halo appearing around the hovered point */ - halo?: { - enabled?: boolean; - opacity?: number; - radius?: number; - }; + halo?: PointMarkerHalo; }; }; inactive?: BasicInactiveState;