@sproutsocial/seeds-react-data-viz 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/index.js +18 -8
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +8 -2
  4. package/dist/index.d.ts +8 -2
  5. package/dist/index.js +18 -8
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -21,6 +21,7 @@ type TypeChartDataStyles = Readonly<{
21
21
  color?: TypeChartStyleColor;
22
22
  }>;
23
23
  type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
24
+ type TypeChartTimeFormat = "12" | "24";
24
25
  type TypeChartTooltipDateFormatter = ({ x }: {
25
26
  x: number;
26
27
  }) => ReactNode;
@@ -63,6 +64,7 @@ type TypeAreaChartProps = Readonly<{
63
64
  x: number;
64
65
  }>) => void;
65
66
  tooltipClickLabel?: ReactNode;
67
+ timeFormat?: TypeChartTimeFormat;
66
68
  }>;
67
69
  declare const AreaChart: react.NamedExoticComponent<Readonly<{
68
70
  data: ReadonlyArray<Readonly<{
@@ -86,6 +88,7 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
86
88
  x: number;
87
89
  }>) => void;
88
90
  tooltipClickLabel?: ReactNode;
91
+ timeFormat?: TypeChartTimeFormat;
89
92
  }>>;
90
93
 
91
94
  type TypeLegendLabel = Readonly<{
@@ -267,6 +270,7 @@ type TypeLineChartProps = Readonly<{
267
270
  x: number;
268
271
  }>) => void;
269
272
  tooltipClickLabel?: ReactNode;
273
+ timeFormat?: TypeChartTimeFormat;
270
274
  }>;
271
275
  declare const LineChart: react.NamedExoticComponent<Readonly<{
272
276
  data: ReadonlyArray<Readonly<{
@@ -289,6 +293,7 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
289
293
  x: number;
290
294
  }>) => void;
291
295
  tooltipClickLabel?: ReactNode;
296
+ timeFormat?: TypeChartTimeFormat;
292
297
  }>>;
293
298
 
294
299
  declare const baseChartOptions: Options;
@@ -317,8 +322,9 @@ type TypeXAxisLabelFormatterProps = Readonly<{
317
322
  tickPositions: AxisTickPositionsArray;
318
323
  unitName: ExtendedTimeTicksInfoObject["unitName"];
319
324
  value: AxisLabelsFormatterContextObject["value"];
325
+ timeFormat?: TypeChartTimeFormat;
320
326
  }>;
321
- declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, }: TypeXAxisLabelFormatterProps) => string;
327
+ declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
322
328
 
323
329
  type TypeYAxisLabelFormatterProps = Readonly<{
324
330
  numberLocale: Intl.LocalesArgument;
@@ -330,4 +336,4 @@ type TypeYAxisLabelFormatterProps = Readonly<{
330
336
  }>;
331
337
  declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
332
338
 
333
- export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
339
+ export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
package/dist/index.d.ts CHANGED
@@ -21,6 +21,7 @@ type TypeChartDataStyles = Readonly<{
21
21
  color?: TypeChartStyleColor;
22
22
  }>;
23
23
  type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
24
+ type TypeChartTimeFormat = "12" | "24";
24
25
  type TypeChartTooltipDateFormatter = ({ x }: {
25
26
  x: number;
26
27
  }) => ReactNode;
@@ -63,6 +64,7 @@ type TypeAreaChartProps = Readonly<{
63
64
  x: number;
64
65
  }>) => void;
65
66
  tooltipClickLabel?: ReactNode;
67
+ timeFormat?: TypeChartTimeFormat;
66
68
  }>;
67
69
  declare const AreaChart: react.NamedExoticComponent<Readonly<{
68
70
  data: ReadonlyArray<Readonly<{
@@ -86,6 +88,7 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
86
88
  x: number;
87
89
  }>) => void;
88
90
  tooltipClickLabel?: ReactNode;
91
+ timeFormat?: TypeChartTimeFormat;
89
92
  }>>;
90
93
 
91
94
  type TypeLegendLabel = Readonly<{
@@ -267,6 +270,7 @@ type TypeLineChartProps = Readonly<{
267
270
  x: number;
268
271
  }>) => void;
269
272
  tooltipClickLabel?: ReactNode;
273
+ timeFormat?: TypeChartTimeFormat;
270
274
  }>;
271
275
  declare const LineChart: react.NamedExoticComponent<Readonly<{
272
276
  data: ReadonlyArray<Readonly<{
@@ -289,6 +293,7 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
289
293
  x: number;
290
294
  }>) => void;
291
295
  tooltipClickLabel?: ReactNode;
296
+ timeFormat?: TypeChartTimeFormat;
292
297
  }>>;
293
298
 
294
299
  declare const baseChartOptions: Options;
@@ -317,8 +322,9 @@ type TypeXAxisLabelFormatterProps = Readonly<{
317
322
  tickPositions: AxisTickPositionsArray;
318
323
  unitName: ExtendedTimeTicksInfoObject["unitName"];
319
324
  value: AxisLabelsFormatterContextObject["value"];
325
+ timeFormat?: TypeChartTimeFormat;
320
326
  }>;
321
- declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, }: TypeXAxisLabelFormatterProps) => string;
327
+ declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
322
328
 
323
329
  type TypeYAxisLabelFormatterProps = Readonly<{
324
330
  numberLocale: Intl.LocalesArgument;
@@ -330,4 +336,4 @@ type TypeYAxisLabelFormatterProps = Readonly<{
330
336
  }>;
331
337
  declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
332
338
 
333
- export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
339
+ export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
package/dist/index.js CHANGED
@@ -4612,6 +4612,7 @@ var PartnerLogo = ({
4612
4612
  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
4613
4613
  const logoViewBox = ViewBoxes[logo];
4614
4614
  const viewBoxCoordinates = logoViewBox?.split(" ") || [];
4615
+ const defaultSize = logoType === "symbol" ? "small" : void 0;
4615
4616
  const defaultWidth = viewBoxCoordinates[2];
4616
4617
  const defaultHeight = viewBoxCoordinates[3];
4617
4618
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -4619,7 +4620,7 @@ var PartnerLogo = ({
4619
4620
  {
4620
4621
  height: height2 ? height2 : defaultHeight + "px",
4621
4622
  width: width2 ? width2 : defaultWidth + "px",
4622
- logoSize: size2,
4623
+ logoSize: size2 ?? defaultSize,
4623
4624
  className: "logo",
4624
4625
  role: "img",
4625
4626
  "aria-label": ariaLabel,
@@ -5170,7 +5171,9 @@ var xAxisLabelFormatter = ({
5170
5171
  textLocale,
5171
5172
  tickPositions = [],
5172
5173
  unitName,
5173
- value
5174
+ value,
5175
+ // optional
5176
+ timeFormat = "12"
5174
5177
  }) => {
5175
5178
  const tickIndex = tickPositions.indexOf(value);
5176
5179
  const isFirst = tickIndex === 0;
@@ -5181,7 +5184,7 @@ var xAxisLabelFormatter = ({
5181
5184
  let secondPartOptions = {};
5182
5185
  switch (unitName) {
5183
5186
  case "hour":
5184
- firstPartOptions = { hour: "numeric" };
5187
+ firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
5185
5188
  if (isFirst || valueDate.getUTCDate() !== previousValueDate.getUTCDate()) {
5186
5189
  secondPartOptions = { day: "numeric", month: "short" };
5187
5190
  }
@@ -5372,7 +5375,8 @@ var useTimeSeriesChartOptions = ({
5372
5375
  currency = "USD",
5373
5376
  numberFormat = "decimal",
5374
5377
  yAxisLabelFormatter: yAxisLabelFormatter2,
5375
- onClick
5378
+ onClick,
5379
+ timeFormat = "12"
5376
5380
  }) => {
5377
5381
  const [options, setOptions] = (0, import_react21.useState)(
5378
5382
  seriesType === "areaspline" ? areaChartOptions : lineChartOptions
@@ -5434,6 +5438,7 @@ var useTimeSeriesChartOptions = ({
5434
5438
  return xAxisLabelFormatter({
5435
5439
  textLocale,
5436
5440
  tickPositions: this.axis.tickPositions || [],
5441
+ timeFormat,
5437
5442
  unitName: this.tickPositionInfo.unitName,
5438
5443
  value: this.value
5439
5444
  });
@@ -5466,6 +5471,7 @@ var useTimeSeriesChartOptions = ({
5466
5471
  onClick,
5467
5472
  seriesType,
5468
5473
  textLocale,
5474
+ timeFormat,
5469
5475
  yAxisLabelFormatter2
5470
5476
  ]);
5471
5477
  return { options, chart, callback };
@@ -5624,7 +5630,8 @@ var AreaChartWithData = (0, import_react22.memo)(function AreaChartWithData2({
5624
5630
  tooltip,
5625
5631
  yAxisLabelFormatter: yAxisLabelFormatter2,
5626
5632
  onClick,
5627
- tooltipClickLabel
5633
+ tooltipClickLabel,
5634
+ timeFormat = "12"
5628
5635
  }) {
5629
5636
  const { options, chart, callback } = useTimeSeriesChartOptions({
5630
5637
  currency,
@@ -5634,7 +5641,8 @@ var AreaChartWithData = (0, import_react22.memo)(function AreaChartWithData2({
5634
5641
  seriesType: "areaspline",
5635
5642
  textLocale,
5636
5643
  yAxisLabelFormatter: yAxisLabelFormatter2,
5637
- onClick
5644
+ onClick,
5645
+ timeFormat
5638
5646
  });
5639
5647
  const colors3 = data.map(
5640
5648
  (series, index) => series.styles?.color ?? theme_default.colors.DATAVIZ_COLORS_LIST[index]
@@ -6072,7 +6080,8 @@ var LineChartWithData = (0, import_react29.memo)(function LineChartWithData2({
6072
6080
  tooltip,
6073
6081
  yAxisLabelFormatter: yAxisLabelFormatter2,
6074
6082
  onClick,
6075
- tooltipClickLabel
6083
+ tooltipClickLabel,
6084
+ timeFormat = "12"
6076
6085
  }) {
6077
6086
  const { options, chart, callback } = useTimeSeriesChartOptions({
6078
6087
  currency,
@@ -6082,7 +6091,8 @@ var LineChartWithData = (0, import_react29.memo)(function LineChartWithData2({
6082
6091
  seriesType: "spline",
6083
6092
  textLocale,
6084
6093
  yAxisLabelFormatter: yAxisLabelFormatter2,
6085
- onClick
6094
+ onClick,
6095
+ timeFormat
6086
6096
  });
6087
6097
  const { colors: colors3, patterns } = data.reduce(
6088
6098
  (acc, item, index) => {