@perses-dev/components 0.20.0 → 0.21.0

package/dist/model/units/units.test.js

@@ -0,0 +1,151 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { formatValue } from './units';
+describe('formatValue()', ()=>{
+    const tests = [
+        {
+            value: 100000,
+            unit: {
+                kind: 'Decimal'
+            },
+            expected: '100,000.00'
+        },
+        {
+            value: 155900,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 4
+            },
+            expected: '155,900.0000'
+        },
+        {
+            value: 10,
+            unit: {
+                kind: 'Percent'
+            },
+            expected: '10.00%'
+        },
+        {
+            value: 50,
+            unit: {
+                kind: 'Percent',
+                decimal_places: 0
+            },
+            expected: '50%'
+        },
+        {
+            value: 0.1,
+            unit: {
+                kind: 'PercentDecimal'
+            },
+            expected: '10.00%'
+        },
+        {
+            value: 100,
+            unit: {
+                kind: 'Bytes',
+                decimal_places: 0,
+                abbreviate: false
+            },
+            expected: '100 bytes'
+        },
+        {
+            value: 100,
+            unit: {
+                kind: 'Bytes',
+                decimal_places: -1,
+                abbreviate: false
+            },
+            expected: '100 bytes'
+        },
+        {
+            value: 225000,
+            unit: {
+                kind: 'Bytes',
+                decimal_places: 0,
+                abbreviate: true
+            },
+            expected: '220 KB'
+        },
+        {
+            value: 505200,
+            unit: {
+                kind: 'Bytes'
+            },
+            expected: '505,200.00 bytes'
+        },
+        {
+            value: 8000,
+            unit: {
+                kind: 'Milliseconds'
+            },
+            expected: '8,000.00 milliseconds'
+        },
+        {
+            value: 200900,
+            unit: {
+                kind: 'Seconds'
+            },
+            expected: '200,900.00 seconds'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Minutes'
+            },
+            expected: '300.00 minutes'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Hours'
+            },
+            expected: '300.00 hours'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Days'
+            },
+            expected: '300.00 days'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Weeks'
+            },
+            expected: '300.00 weeks'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Months'
+            },
+            expected: '300.00 months'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Years'
+            },
+            expected: '300.00 years'
+        }
+    ];
+    tests.forEach(({ value , unit , expected  })=>{
+        it(`formats ${value} as ${JSON.stringify(unit)}`, ()=>{
+            expect(formatValue(value, unit)).toEqual(expected);
+        });
+    });
+});
+
+//# sourceMappingURL=units.test.js.map

package/dist/model/units/units.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/model/units/units.test.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { formatValue, UnitOptions } from './units';\n\ndescribe('formatValue()', () => {\n  const tests = [\n    {\n      value: 100000,\n      unit: { kind: 'Decimal' },\n      expected: '100,000.00',\n    },\n    {\n      value: 155900,\n      unit: { kind: 'Decimal', decimal_places: 4 },\n      expected: '155,900.0000',\n    },\n    {\n      value: 10,\n      unit: { kind: 'Percent' },\n      expected: '10.00%',\n    },\n    {\n      value: 50,\n      unit: { kind: 'Percent', decimal_places: 0 },\n      expected: '50%',\n    },\n    {\n      value: 0.1,\n      unit: { kind: 'PercentDecimal' },\n      expected: '10.00%',\n    },\n    {\n      value: 100,\n      unit: { kind: 'Bytes', decimal_places: 0, abbreviate: false },\n      expected: '100 bytes',\n    },\n    {\n      value: 100,\n      unit: { kind: 'Bytes', decimal_places: -1, abbreviate: false },\n      expected: '100 bytes',\n    },\n    {\n      value: 225000,\n      unit: { kind: 'Bytes', decimal_places: 0, abbreviate: true },\n      expected: '220 KB',\n    },\n    {\n      value: 505200,\n      unit: { kind: 'Bytes' },\n      expected: '505,200.00 bytes',\n    },\n    {\n      value: 8000,\n      unit: { kind: 'Milliseconds' },\n      expected: '8,000.00 milliseconds',\n    },\n    {\n      value: 200900,\n      unit: { kind: 'Seconds' },\n      expected: '200,900.00 seconds',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Minutes' },\n      expected: '300.00 minutes',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Hours' },\n      expected: '300.00 hours',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Days' },\n      expected: '300.00 days',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Weeks' },\n      expected: '300.00 weeks',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Months' },\n      expected: '300.00 months',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Years' },\n      expected: '300.00 years',\n    },\n  ];\n\n  tests.forEach(({ value, unit, expected }) => {\n    it(`formats ${value} as ${JSON.stringify(unit)}`, () => {\n      expect(formatValue(value, unit as UnitOptions)).toEqual(expected);\n    });\n  });\n});\n"],"names":["formatValue","describe","tests","value","unit","kind","expected","decimal_places","abbreviate","forEach","it","JSON","stringify","expect","toEqual"],"mappings":"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"}

package/dist/utils/format.d.ts

@@ -0,0 +1,3 @@
+export declare function dateFormatOptionsWithTimeZone(dateFormatOptions: Intl.DateTimeFormatOptions, timeZone?: string): Intl.DateTimeFormatOptions;
+export declare function formatWithTimeZone(date: Date, formatString: string, timeZone?: string): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/utils/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/utils/format.ts"],"names":[],"mappings":"AAgBA,wBAAgB,6BAA6B,CAAC,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,EAAE,MAAM,8BAgB7G;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAYrF"}

package/dist/utils/format.js

@@ -0,0 +1,44 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { formatInTimeZone } from 'date-fns-tz';
+import { format } from 'date-fns';
+export function dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone) {
+    /*
+   * if timeZone is provided, and is not local|browser,
+   * then set timeZone option (recognize UTC regardless of uppercase/lowercase)
+   * otherwise, default to browser timeZone setting
+   */ if (timeZone) {
+        const lowerTimeZone = timeZone.toLowerCase();
+        if (lowerTimeZone !== 'local' && lowerTimeZone !== 'browser') {
+            return {
+                ...dateFormatOptions,
+                timeZone: lowerTimeZone === 'utc' ? 'UTC' : timeZone
+            };
+        }
+    }
+    return dateFormatOptions;
+}
+export function formatWithTimeZone(date, formatString, timeZone) {
+    /*
+   * if timeZone is provided, and is not local|browser,
+   * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)
+   * otherwise, format without timeZone option, defaulting to browser timeZone setting
+   */ const lowerTimeZone = timeZone === null || timeZone === void 0 ? void 0 : timeZone.toLowerCase();
+    if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
+        return format(date, formatString);
+    } else {
+        return formatInTimeZone(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
+    }
+}
+
+//# sourceMappingURL=format.js.map

package/dist/utils/format.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/format.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { formatInTimeZone } from 'date-fns-tz';\nimport { format } from 'date-fns';\n\nexport function dateFormatOptionsWithTimeZone(dateFormatOptions: Intl.DateTimeFormatOptions, timeZone?: string) {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then set timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, default to browser timeZone setting\n   */\n  if (timeZone) {\n    const lowerTimeZone = timeZone.toLowerCase();\n    if (lowerTimeZone !== 'local' && lowerTimeZone !== 'browser') {\n      return {\n        ...dateFormatOptions,\n        timeZone: lowerTimeZone === 'utc' ? 'UTC' : timeZone,\n      };\n    }\n  }\n  return dateFormatOptions;\n}\n\nexport function formatWithTimeZone(date: Date, formatString: string, timeZone?: string) {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, format without timeZone option, defaulting to browser timeZone setting\n   */\n  const lowerTimeZone = timeZone?.toLowerCase();\n  if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {\n    return format(date, formatString);\n  } else {\n    return formatInTimeZone(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);\n  }\n}\n"],"names":["formatInTimeZone","format","dateFormatOptionsWithTimeZone","dateFormatOptions","timeZone","lowerTimeZone","toLowerCase","formatWithTimeZone","date","formatString"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,QAAQ,aAAa,CAAC;AAC/C,SAASC,MAAM,QAAQ,UAAU,CAAC;AAElC,OAAO,SAASC,6BAA6B,CAACC,iBAA6C,EAAEC,QAAiB,EAAE;IAC9G;;;;GAIC,GACD,IAAIA,QAAQ,EAAE;QACZ,MAAMC,aAAa,GAAGD,QAAQ,CAACE,WAAW,EAAE,AAAC;QAC7C,IAAID,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,SAAS,EAAE;YAC5D,OAAO;gBACL,GAAGF,iBAAiB;gBACpBC,QAAQ,EAAEC,aAAa,KAAK,KAAK,GAAG,KAAK,GAAGD,QAAQ;aACrD,CAAC;QACJ,CAAC;IACH,CAAC;IACD,OAAOD,iBAAiB,CAAC;AAC3B,CAAC;AAED,OAAO,SAASI,kBAAkB,CAACC,IAAU,EAAEC,YAAoB,EAAEL,QAAiB,EAAE;IACtF;;;;GAIC,GACD,MAAMC,aAAa,GAAGD,QAAQ,aAARA,QAAQ,WAAa,GAArBA,KAAAA,CAAqB,GAArBA,QAAQ,CAAEE,WAAW,EAAE,AAAC;IAC9C,IAAI,CAACF,QAAQ,IAAIC,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,SAAS,EAAE;QACzE,OAAOJ,MAAM,CAACO,IAAI,EAAEC,YAAY,CAAC,CAAC;IACpC,OAAO;QACL,OAAOT,gBAAgB,CAACQ,IAAI,EAAEH,aAAa,KAAK,KAAK,GAAG,KAAK,GAAGD,QAAQ,EAAEK,YAAY,CAAC,CAAC;IAC1F,CAAC;AACH,CAAC"}

package/dist/utils/format.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=format.test.d.ts.map

package/dist/utils/format.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.test.d.ts","sourceRoot":"","sources":["../../src/utils/format.test.ts"],"names":[],"mappings":""}

package/dist/utils/format.test.js

@@ -0,0 +1,45 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { dateFormatOptionsWithTimeZone, formatWithTimeZone } from './format';
+const DATE = new Date(168523200000);
+const DATE_FORMAT_OPTIONS = {
+    hour: 'numeric',
+    minute: 'numeric',
+    hourCycle: 'h23'
+};
+describe('formatWithTimeZone', ()=>{
+    it('should format in Los Angeles timezone', ()=>{
+        expect(formatWithTimeZone(DATE, 'yyyy-MM-dd HH:mm:ss', 'America/Los_Angeles')).toBe('1975-05-05 05:00:00');
+    });
+    it('should format in UTC timezone', ()=>{
+        expect(formatWithTimeZone(DATE, 'yyyy-MM-dd HH:mm:ss', 'UTC')).toBe('1975-05-05 12:00:00');
+        expect(formatWithTimeZone(DATE, 'yyyy-MM-dd HH:mm:ss', 'utc')).toBe('1975-05-05 12:00:00');
+    });
+});
+describe('dateFormatOptionsWithTimeZone', ()=>{
+    it('should format in Los Angeles timezone', ()=>{
+        const dateFormatOptions = dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'America/Los_Angeles');
+        expect(new Intl.DateTimeFormat(undefined, dateFormatOptions).format(DATE)).toBe('05:00');
+    });
+    it('should format in UTC timezone', ()=>{
+        const dateFormatOptions = dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'utc');
+        expect(new Intl.DateTimeFormat(undefined, dateFormatOptions).format(DATE)).toBe('12:00');
+    });
+    it('should use browser local timezone', ()=>{
+        expect(dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'browser').timeZone).toBeUndefined();
+        expect(dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'local').timeZone).toBeUndefined();
+        expect(dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS).timeZone).toBeUndefined();
+    });
+});
+
+//# sourceMappingURL=format.test.js.map

package/dist/utils/format.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/format.test.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { dateFormatOptionsWithTimeZone, formatWithTimeZone } from './format';\n\nconst DATE = new Date(168523200000);\n\nconst DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {\n  hour: 'numeric',\n  minute: 'numeric',\n  hourCycle: 'h23',\n};\n\ndescribe('formatWithTimeZone', () => {\n  it('should format in Los Angeles timezone', () => {\n    expect(formatWithTimeZone(DATE, 'yyyy-MM-dd HH:mm:ss', 'America/Los_Angeles')).toBe('1975-05-05 05:00:00');\n  });\n  it('should format in UTC timezone', () => {\n    expect(formatWithTimeZone(DATE, 'yyyy-MM-dd HH:mm:ss', 'UTC')).toBe('1975-05-05 12:00:00');\n    expect(formatWithTimeZone(DATE, 'yyyy-MM-dd HH:mm:ss', 'utc')).toBe('1975-05-05 12:00:00');\n  });\n});\n\ndescribe('dateFormatOptionsWithTimeZone', () => {\n  it('should format in Los Angeles timezone', () => {\n    const dateFormatOptions = dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'America/Los_Angeles');\n    expect(new Intl.DateTimeFormat(undefined, dateFormatOptions).format(DATE)).toBe('05:00');\n  });\n  it('should format in UTC timezone', () => {\n    const dateFormatOptions = dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'utc');\n    expect(new Intl.DateTimeFormat(undefined, dateFormatOptions).format(DATE)).toBe('12:00');\n  });\n  it('should use browser local timezone', () => {\n    expect(dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'browser').timeZone).toBeUndefined();\n    expect(dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS, 'local').timeZone).toBeUndefined();\n    expect(dateFormatOptionsWithTimeZone(DATE_FORMAT_OPTIONS).timeZone).toBeUndefined();\n  });\n});\n"],"names":["dateFormatOptionsWithTimeZone","formatWithTimeZone","DATE","Date","DATE_FORMAT_OPTIONS","hour","minute","hourCycle","describe","it","expect","toBe","dateFormatOptions","Intl","DateTimeFormat","undefined","format","timeZone","toBeUndefined"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AACjC,SAASA,6BAA6B,EAAEC,kBAAkB,QAAQ,UAAU,CAAC;AAE7E,MAAMC,IAAI,GAAG,IAAIC,IAAI,CAAC,YAAY,CAAC,AAAC;AAEpC,MAAMC,mBAAmB,GAA+B;IACtDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,SAAS,EAAE,KAAK;CACjB,AAAC;AAEFC,QAAQ,CAAC,oBAAoB,EAAE,IAAM;IACnCC,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChDC,MAAM,CAACT,kBAAkB,CAACC,IAAI,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAACS,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC7G,CAAC,CAAC,CAAC;IACHF,EAAE,CAAC,+BAA+B,EAAE,IAAM;QACxCC,MAAM,CAACT,kBAAkB,CAACC,IAAI,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAACS,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC3FD,MAAM,CAACT,kBAAkB,CAACC,IAAI,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAACS,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC7F,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEHH,QAAQ,CAAC,+BAA+B,EAAE,IAAM;IAC9CC,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMG,iBAAiB,GAAGZ,6BAA6B,CAACI,mBAAmB,EAAE,qBAAqB,CAAC,AAAC;QACpGM,MAAM,CAAC,IAAIG,IAAI,CAACC,cAAc,CAACC,SAAS,EAAEH,iBAAiB,CAAC,CAACI,MAAM,CAACd,IAAI,CAAC,CAAC,CAACS,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3F,CAAC,CAAC,CAAC;IACHF,EAAE,CAAC,+BAA+B,EAAE,IAAM;QACxC,MAAMG,iBAAiB,GAAGZ,6BAA6B,CAACI,mBAAmB,EAAE,KAAK,CAAC,AAAC;QACpFM,MAAM,CAAC,IAAIG,IAAI,CAACC,cAAc,CAACC,SAAS,EAAEH,iBAAiB,CAAC,CAACI,MAAM,CAACd,IAAI,CAAC,CAAC,CAACS,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3F,CAAC,CAAC,CAAC;IACHF,EAAE,CAAC,mCAAmC,EAAE,IAAM;QAC5CC,MAAM,CAACV,6BAA6B,CAACI,mBAAmB,EAAE,SAAS,CAAC,CAACa,QAAQ,CAAC,CAACC,aAAa,EAAE,CAAC;QAC/FR,MAAM,CAACV,6BAA6B,CAACI,mBAAmB,EAAE,OAAO,CAAC,CAACa,QAAQ,CAAC,CAACC,aAAa,EAAE,CAAC;QAC7FR,MAAM,CAACV,6BAA6B,CAACI,mBAAmB,CAAC,CAACa,QAAQ,CAAC,CAACC,aAAa,EAAE,CAAC;IACtF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './combine-sx';
 export * from './theme-gen';
 export * from './component-ids';
+export * from './format';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}

package/dist/utils/index.js

@@ -13,5 +13,6 @@
 export * from './combine-sx';
 export * from './theme-gen';
 export * from './component-ids';
+export * from './format';
 
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './combine-sx';\nexport * from './theme-gen';\nexport * from './component-ids';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './combine-sx';\nexport * from './theme-gen';\nexport * from './component-ids';\nexport * from './format';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -34,8 +34,9 @@
   "dependencies": {
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "^0.20.0",
+    "@perses-dev/core": "0.21.0",
     "date-fns": "^2.28.0",
+    "date-fns-tz": "^1.3.7",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "mathjs": "^10.6.4",