@sproutsocial/seeds-react-data-viz 0.7.9 → 0.7.11

package/dist/esm/index.js

@@ -634,13 +634,28 @@ var yAxisLabelFormatter = ({
 };
 
 // src/helpers/xAxisLabelFormatter.ts
+var getDatePartsInTimezone = (date, timezone) => {
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    timeZone: timezone
+  });
+  const parts = formatter.formatToParts(date);
+  return {
+    day: parseInt(parts.find((p) => p.type === "day")?.value ?? "0", 10),
+    month: parseInt(parts.find((p) => p.type === "month")?.value ?? "0", 10),
+    year: parseInt(parts.find((p) => p.type === "year")?.value ?? "0", 10)
+  };
+};
 var xAxisLabelFormatter = ({
   textLocale,
   tickPositions = [],
   unitName,
   value,
   // optional
-  timeFormat = "12"
+  timeFormat = "12",
+  timezone = "UTC"
 }) => {
   if (typeof value === "string") {
     return `<span>${value}</span>`;
@@ -649,26 +664,28 @@ var xAxisLabelFormatter = ({
   const isFirst = tickIndex === 0;
   const previousValue = tickPositions[tickIndex - 1];
   const valueDate = new Date(value);
-  const previousValueDate = new Date(previousValue);
+  const valueParts = getDatePartsInTimezone(valueDate, timezone);
+  const previousValueDate = previousValue ? new Date(previousValue) : void 0;
+  const previousValueParts = previousValueDate ? getDatePartsInTimezone(previousValueDate, timezone) : void 0;
   let firstPartOptions = {};
   let secondPartOptions = {};
   switch (unitName) {
     case "hour":
       firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
-      if (isFirst || valueDate.getUTCDate() !== previousValueDate.getUTCDate()) {
+      if (isFirst || valueParts.day !== previousValueParts?.day) {
         secondPartOptions = { day: "numeric", month: "short" };
       }
       break;
     case "day":
     case "week":
       firstPartOptions = { day: "numeric" };
-      if (isFirst || valueDate.getUTCMonth() !== previousValueDate.getUTCMonth()) {
+      if (isFirst || valueParts.month !== previousValueParts?.month) {
         secondPartOptions = { month: "short" };
       }
       break;
     case "month":
       firstPartOptions = { month: "short" };
-      if (isFirst || valueDate.getUTCFullYear() !== previousValueDate.getUTCFullYear()) {
+      if (isFirst || valueParts.year !== previousValueParts?.year) {
         secondPartOptions = { year: "numeric" };
       }
       break;
@@ -681,11 +698,11 @@ var xAxisLabelFormatter = ({
   }
   const firstPart = new Intl.DateTimeFormat(textLocale, {
     ...firstPartOptions,
-    timeZone: "UTC"
+    timeZone: timezone
   }).format(valueDate);
   const secondPart = Object.keys(secondPartOptions).length > 0 ? new Intl.DateTimeFormat(textLocale, {
     ...secondPartOptions,
-    timeZone: "UTC"
+    timeZone: timezone
   }).format(valueDate) : void 0;
   return `<span>${firstPart}</span>${secondPart ? `<span>${secondPart}</span>` : ""}`;
 };
@@ -1086,6 +1103,7 @@ var useTimeSeriesChartOptions = ({
   yAxisLabelFormatter: yAxisLabelFormatter2,
   onClick,
   timeFormat = "12",
+  timezone = "UTC",
   xAxisLabelFormatter: xAxisLabelFormatter2
 }) => {
   const [chart, setChart] = useState3(null);
@@ -1264,6 +1282,7 @@ var useTimeSeriesChartOptions = ({
                 textLocale,
                 tickPositions,
                 timeFormat,
+                timezone,
                 unitName,
                 value
               });
@@ -1519,6 +1538,7 @@ var AreaChartWithData = memo14(function AreaChartWithData2({
   onClick,
   tooltipClickLabel,
   timeFormat = "12",
+  timezone = "UTC",
   xAnnotations
 }) {
   const { options, chart, callback } = useTimeSeriesChartOptions({
@@ -1532,6 +1552,7 @@ var AreaChartWithData = memo14(function AreaChartWithData2({
     yAxisLabelFormatter: yAxisLabelFormatter2,
     onClick,
     timeFormat,
+    timezone,
     xAnnotations
   });
   const colors = data.map(
@@ -2081,6 +2102,7 @@ var LineChartWithData = memo23(function LineChartWithData2({
   onClick,
   tooltipClickLabel,
   timeFormat = "12",
+  timezone = "UTC",
   xAnnotations,
   xAxisLabelFormatter: xAxisLabelFormatter2
 }) {
@@ -2095,6 +2117,7 @@ var LineChartWithData = memo23(function LineChartWithData2({
     yAxisLabelFormatter: yAxisLabelFormatter2,
     onClick,
     timeFormat,
+    timezone,
     xAnnotations,
     xAxisLabelFormatter: xAxisLabelFormatter2
   });