@perses-dev/components 0.54.0-beta.6 → 0.54.0-beta.8

package/dist/FormEditor/FormActions.d.ts

@@ -1,6 +1,6 @@
 import { StackProps } from '@mui/material';
+import { Action } from '@perses-dev/client';
 import { ReactElement } from 'react';
-import { Action } from '@perses-dev/components';
 export interface FormActionsProps extends StackProps {
     action: Action;
     submitText?: string;

package/dist/FormEditor/FormActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../src/FormEditor/FormActions.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,UAAU,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAmB,EACnB,UAAqB,EACrB,UAAU,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CAkDjC"}
+{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../src/FormEditor/FormActions.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,UAAU,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAmB,EACnB,UAAqB,EACrB,UAAU,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CAkDjC"}

package/dist/FormEditor/FormActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright 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 { Button, Divider, Stack, StackProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Action } from '@perses-dev/components'; // TODO the internal permission system of Perses should not be in a shared library\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAoB,gBAAgB;AAgBnE,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}
+{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright 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 { Button, Divider, Stack, StackProps } from '@mui/material';\nimport { Action } from '@perses-dev/client';\nimport { ReactElement } from 'react';\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAoB,gBAAgB;AAgBnE,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}

package/dist/cjs/utils/format.js

@@ -112,7 +112,7 @@ function getFormattedAxisLabel(rangeMs) {
         day: '{MM}/{dd}'
     };
 }
-const getDateAndTime = (timeMs)=>{
+const getDateAndTime = (timeMs, customFormat)=>{
     if (!timeMs) {
         return {
             formattedDate: '',
@@ -120,10 +120,8 @@ const getDateAndTime = (timeMs)=>{
         };
     }
     const date = new Date(timeMs);
-    const formattedDate = (0, _datefns.format)(date, 'MMM dd, yyyy - ');
-    const formattedTime = (0, _datefns.format)(date, 'HH:mm:ss');
     return {
-        formattedDate,
-        formattedTime
+        formattedDate: customFormat ? customFormat(date, 'MMM dd, yyyy') : (0, _datefns.format)(date, 'MMM dd, yyyy'),
+        formattedTime: customFormat ? customFormat(date, 'HH:mm:ss') : (0, _datefns.format)(date, 'HH:mm:ss')
     };
 };

package/dist/model/action.d.ts

@@ -1,4 +1,4 @@
-export type Action = 'create' | 'read' | 'update' | 'delete' | '*';
+import { Action } from '@perses-dev/client';
 export declare function getTitleAction(action: Action, isDraft: boolean): string;
 export declare function getSubmitText(action: Action, isDraft: boolean): string;
 //# sourceMappingURL=action.d.ts.map

package/dist/model/action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/model/action.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AAEnE,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAMvE;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAKtE"}
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/model/action.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAMvE;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAKtE"}

package/dist/model/action.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/action.ts"],"sourcesContent":["// Copyright 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 type Action = 'create' | 'read' | 'update' | 'delete' | '*';\n\nexport function getTitleAction(action: Action, isDraft: boolean): string {\n  if (action === 'read') return 'View';\n  if (isDraft && action === 'create') return 'Add';\n  if (!isDraft && action === 'create') return 'Create';\n  if (action === 'update') return 'Edit';\n  return '';\n}\n\nexport function getSubmitText(action: Action, isDraft: boolean): string {\n  if (isDraft && action === 'create') return 'Add';\n  if (isDraft && action === 'update') return 'Apply';\n  if (!isDraft) return 'Save';\n  return '';\n}\n"],"names":["getTitleAction","action","isDraft","getSubmitText"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,OAAO,SAASA,eAAeC,MAAc,EAAEC,OAAgB;IAC7D,IAAID,WAAW,QAAQ,OAAO;IAC9B,IAAIC,WAAWD,WAAW,UAAU,OAAO;IAC3C,IAAI,CAACC,WAAWD,WAAW,UAAU,OAAO;IAC5C,IAAIA,WAAW,UAAU,OAAO;IAChC,OAAO;AACT;AAEA,OAAO,SAASE,cAAcF,MAAc,EAAEC,OAAgB;IAC5D,IAAIA,WAAWD,WAAW,UAAU,OAAO;IAC3C,IAAIC,WAAWD,WAAW,UAAU,OAAO;IAC3C,IAAI,CAACC,SAAS,OAAO;IACrB,OAAO;AACT"}
+{"version":3,"sources":["../../src/model/action.ts"],"sourcesContent":["// Copyright 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 { Action } from '@perses-dev/client';\n\nexport function getTitleAction(action: Action, isDraft: boolean): string {\n  if (action === 'read') return 'View';\n  if (isDraft && action === 'create') return 'Add';\n  if (!isDraft && action === 'create') return 'Create';\n  if (action === 'update') return 'Edit';\n  return '';\n}\n\nexport function getSubmitText(action: Action, isDraft: boolean): string {\n  if (isDraft && action === 'create') return 'Add';\n  if (isDraft && action === 'update') return 'Apply';\n  if (!isDraft) return 'Save';\n  return '';\n}\n"],"names":["getTitleAction","action","isDraft","getSubmitText"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,OAAO,SAASA,eAAeC,MAAc,EAAEC,OAAgB;IAC7D,IAAID,WAAW,QAAQ,OAAO;IAC9B,IAAIC,WAAWD,WAAW,UAAU,OAAO;IAC3C,IAAI,CAACC,WAAWD,WAAW,UAAU,OAAO;IAC5C,IAAIA,WAAW,UAAU,OAAO;IAChC,OAAO;AACT;AAEA,OAAO,SAASE,cAAcF,MAAc,EAAEC,OAAgB;IAC5D,IAAIA,WAAWD,WAAW,UAAU,OAAO;IAC3C,IAAIC,WAAWD,WAAW,UAAU,OAAO;IAC3C,IAAI,CAACC,SAAS,OAAO;IACrB,OAAO;AACT"}

package/dist/utils/format.d.ts

@@ -10,6 +10,6 @@ interface FormattedDateTime {
     formattedDate: string;
     formattedTime: string;
 }
-export declare const getDateAndTime: (timeMs?: number) => FormattedDateTime;
+export declare const getDateAndTime: (timeMs?: number, customFormat?: (date: Date, format: string) => string) => FormattedDateTime;
 export {};
 //# sourceMappingURL=format.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/utils/format.ts"],"names":[],"mappings":"AAgBA,wBAAgB,6BAA6B,CAC3C,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,EAC7C,QAAQ,CAAC,EAAE,MAAM,GAChB,IAAI,CAAC,qBAAqB,CAgB5B;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAY9F;AAED,wBAAgB,YAAY,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CA0BtD;AAGD,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GACjD,MAAM,GACN;IACE,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,wCAAwC,CAAC;IAC/C,GAAG,EAAE,WAAW,CAAC;CAClB,CA8BJ;AAED,UAAU,iBAAiB;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,iBAWhD,CAAC"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/utils/format.ts"],"names":[],"mappings":"AAgBA,wBAAgB,6BAA6B,CAC3C,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,EAC7C,QAAQ,CAAC,EAAE,MAAM,GAChB,IAAI,CAAC,qBAAqB,CAgB5B;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAY9F;AAED,wBAAgB,YAAY,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CA0BtD;AAGD,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GACjD,MAAM,GACN;IACE,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,wCAAwC,CAAC;IAC/C,GAAG,EAAE,WAAW,CAAC;CAClB,CA8BJ;AAED,UAAU,iBAAiB;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,YAChB,MAAM,iBACA,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,KACpD,iBASF,CAAC"}

package/dist/utils/format.js

@@ -86,7 +86,7 @@ export function getFormattedAxisLabel(rangeMs) {
         day: '{MM}/{dd}'
     };
 }
-export const getDateAndTime = (timeMs)=>{
+export const getDateAndTime = (timeMs, customFormat)=>{
     if (!timeMs) {
         return {
             formattedDate: '',
@@ -94,11 +94,9 @@ export const getDateAndTime = (timeMs)=>{
         };
     }
     const date = new Date(timeMs);
-    const formattedDate = format(date, 'MMM dd, yyyy - ');
-    const formattedTime = format(date, 'HH:mm:ss');
     return {
-        formattedDate,
-        formattedTime
+        formattedDate: customFormat ? customFormat(date, 'MMM dd, yyyy') : format(date, 'MMM dd, yyyy'),
+        formattedTime: customFormat ? customFormat(date, 'HH:mm:ss') : format(date, 'HH:mm:ss')
     };
 };
 

package/dist/utils/format.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/format.ts"],"sourcesContent":["// Copyright 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 { tz } from '@date-fns/tz';\nimport { format } from 'date-fns';\n\nexport function dateFormatOptionsWithTimeZone(\n  dateFormatOptions: Intl.DateTimeFormatOptions,\n  timeZone?: string\n): Intl.DateTimeFormatOptions {\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): 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 format(date, formatString, { in: tz(lowerTimeZone === 'utc' ? 'UTC' : timeZone) });\n  }\n}\n\nexport function getGMTOffset(timeZone?: string): string {\n  const lower = timeZone?.toLowerCase();\n\n  const resolvedTimeZone =\n    !timeZone || lower === 'local' || lower === 'browser'\n      ? Intl.DateTimeFormat().resolvedOptions().timeZone\n      : lower === 'utc'\n        ? 'UTC'\n        : timeZone;\n\n  try {\n    const formatter = new Intl.DateTimeFormat('en-US', {\n      timeZone: resolvedTimeZone,\n      timeZoneName: 'shortOffset',\n    });\n\n    const parts = formatter.formatToParts(new Date());\n    const tzPart = parts.find((p) => p.type === 'timeZoneName');\n\n    const value = tzPart?.value ?? '';\n\n    if (value === 'GMT') return 'GMT+0';\n    return value;\n  } catch {\n    return 'GMT+0';\n  }\n}\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedAxisLabel(rangeMs: number):\n  | string\n  | {\n      month: '{MMM}';\n      year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}';\n      day: '{MM}/{dd}';\n    } {\n  const dayMs = 86400000;\n  const monthMs = 2629440000;\n  const yearMs = 31536000000;\n\n  // more than 5 years\n  if (rangeMs > yearMs * 5) {\n    return '{yyyy}';\n  }\n\n  // more than 2 years\n  if (rangeMs > yearMs * 2) {\n    return '{MMM} {yyyy}';\n  }\n\n  // between 5 days to 6 months\n  if (rangeMs > dayMs * 5 && rangeMs < monthMs * 6) {\n    return '{MM}/{dd}'; // 12/01\n  }\n\n  // between 2 and 5 days\n  if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 5) {\n    return '{MM}/{dd} {HH}:{mm}'; // 12/01 12:30\n  }\n\n  return {\n    year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n    month: '{MMM}', // Jan, Feb, ...\n    day: '{MM}/{dd}',\n  };\n}\n\ninterface FormattedDateTime {\n  formattedDate: string;\n  formattedTime: string;\n}\n\nexport const getDateAndTime = (timeMs?: number): FormattedDateTime => {\n  if (!timeMs) {\n    return { formattedDate: '', formattedTime: '' };\n  }\n  const date = new Date(timeMs);\n  const formattedDate = format(date, 'MMM dd, yyyy - ');\n  const formattedTime = format(date, 'HH:mm:ss');\n  return {\n    formattedDate,\n    formattedTime,\n  };\n};\n"],"names":["tz","format","dateFormatOptionsWithTimeZone","dateFormatOptions","timeZone","lowerTimeZone","toLowerCase","formatWithTimeZone","date","formatString","in","getGMTOffset","lower","resolvedTimeZone","Intl","DateTimeFormat","resolvedOptions","formatter","timeZoneName","parts","formatToParts","Date","tzPart","find","p","type","value","getFormattedAxisLabel","rangeMs","dayMs","monthMs","yearMs","year","month","day","getDateAndTime","timeMs","formattedDate","formattedTime"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,EAAE,QAAQ,eAAe;AAClC,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,SAASC,8BACdC,iBAA6C,EAC7CC,QAAiB;IAEjB;;;;GAIC,GACD,IAAIA,UAAU;QACZ,MAAMC,gBAAgBD,SAASE,WAAW;QAC1C,IAAID,kBAAkB,WAAWA,kBAAkB,WAAW;YAC5D,OAAO;gBACL,GAAGF,iBAAiB;gBACpBC,UAAUC,kBAAkB,QAAQ,QAAQD;YAC9C;QACF;IACF;IACA,OAAOD;AACT;AAEA,OAAO,SAASI,mBAAmBC,IAAU,EAAEC,YAAoB,EAAEL,QAAiB;IACpF;;;;GAIC,GACD,MAAMC,gBAAgBD,UAAUE;IAChC,IAAI,CAACF,YAAYC,kBAAkB,WAAWA,kBAAkB,WAAW;QACzE,OAAOJ,OAAOO,MAAMC;IACtB,OAAO;QACL,OAAOR,OAAOO,MAAMC,cAAc;YAAEC,IAAIV,GAAGK,kBAAkB,QAAQ,QAAQD;QAAU;IACzF;AACF;AAEA,OAAO,SAASO,aAAaP,QAAiB;IAC5C,MAAMQ,QAAQR,UAAUE;IAExB,MAAMO,mBACJ,CAACT,YAAYQ,UAAU,WAAWA,UAAU,YACxCE,KAAKC,cAAc,GAAGC,eAAe,GAAGZ,QAAQ,GAChDQ,UAAU,QACR,QACAR;IAER,IAAI;QACF,MAAMa,YAAY,IAAIH,KAAKC,cAAc,CAAC,SAAS;YACjDX,UAAUS;YACVK,cAAc;QAChB;QAEA,MAAMC,QAAQF,UAAUG,aAAa,CAAC,IAAIC;QAC1C,MAAMC,SAASH,MAAMI,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAK;QAE5C,MAAMC,QAAQJ,QAAQI,SAAS;QAE/B,IAAIA,UAAU,OAAO,OAAO;QAC5B,OAAOA;IACT,EAAE,OAAM;QACN,OAAO;IACT;AACF;AAEA,sEAAsE;AACtE,OAAO,SAASC,sBAAsBC,OAAe;IAOnD,MAAMC,QAAQ;IACd,MAAMC,UAAU;IAChB,MAAMC,SAAS;IAEf,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,6BAA6B;IAC7B,IAAIH,UAAUC,QAAQ,KAAKD,UAAUE,UAAU,GAAG;QAChD,OAAO,aAAa,QAAQ;IAC9B;IAEA,uBAAuB;IACvB,IAAIF,UAAUC,QAAQ,KAAKD,WAAWC,QAAQ,GAAG;QAC/C,OAAO,uBAAuB,cAAc;IAC9C;IAEA,OAAO;QACLG,MAAM;QACNC,OAAO;QACPC,KAAK;IACP;AACF;AAOA,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX,OAAO;YAAEC,eAAe;YAAIC,eAAe;QAAG;IAChD;IACA,MAAM9B,OAAO,IAAIa,KAAKe;IACtB,MAAMC,gBAAgBpC,OAAOO,MAAM;IACnC,MAAM8B,gBAAgBrC,OAAOO,MAAM;IACnC,OAAO;QACL6B;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../src/utils/format.ts"],"sourcesContent":["// Copyright 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 { tz } from '@date-fns/tz';\nimport { format } from 'date-fns';\n\nexport function dateFormatOptionsWithTimeZone(\n  dateFormatOptions: Intl.DateTimeFormatOptions,\n  timeZone?: string\n): Intl.DateTimeFormatOptions {\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): 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 format(date, formatString, { in: tz(lowerTimeZone === 'utc' ? 'UTC' : timeZone) });\n  }\n}\n\nexport function getGMTOffset(timeZone?: string): string {\n  const lower = timeZone?.toLowerCase();\n\n  const resolvedTimeZone =\n    !timeZone || lower === 'local' || lower === 'browser'\n      ? Intl.DateTimeFormat().resolvedOptions().timeZone\n      : lower === 'utc'\n        ? 'UTC'\n        : timeZone;\n\n  try {\n    const formatter = new Intl.DateTimeFormat('en-US', {\n      timeZone: resolvedTimeZone,\n      timeZoneName: 'shortOffset',\n    });\n\n    const parts = formatter.formatToParts(new Date());\n    const tzPart = parts.find((p) => p.type === 'timeZoneName');\n\n    const value = tzPart?.value ?? '';\n\n    if (value === 'GMT') return 'GMT+0';\n    return value;\n  } catch {\n    return 'GMT+0';\n  }\n}\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedAxisLabel(rangeMs: number):\n  | string\n  | {\n      month: '{MMM}';\n      year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}';\n      day: '{MM}/{dd}';\n    } {\n  const dayMs = 86400000;\n  const monthMs = 2629440000;\n  const yearMs = 31536000000;\n\n  // more than 5 years\n  if (rangeMs > yearMs * 5) {\n    return '{yyyy}';\n  }\n\n  // more than 2 years\n  if (rangeMs > yearMs * 2) {\n    return '{MMM} {yyyy}';\n  }\n\n  // between 5 days to 6 months\n  if (rangeMs > dayMs * 5 && rangeMs < monthMs * 6) {\n    return '{MM}/{dd}'; // 12/01\n  }\n\n  // between 2 and 5 days\n  if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 5) {\n    return '{MM}/{dd} {HH}:{mm}'; // 12/01 12:30\n  }\n\n  return {\n    year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n    month: '{MMM}', // Jan, Feb, ...\n    day: '{MM}/{dd}',\n  };\n}\n\ninterface FormattedDateTime {\n  formattedDate: string;\n  formattedTime: string;\n}\n\nexport const getDateAndTime = (\n  timeMs?: number,\n  customFormat?: (date: Date, format: string) => string\n): FormattedDateTime => {\n  if (!timeMs) {\n    return { formattedDate: '', formattedTime: '' };\n  }\n  const date = new Date(timeMs);\n  return {\n    formattedDate: customFormat ? customFormat(date, 'MMM dd, yyyy') : format(date, 'MMM dd, yyyy'),\n    formattedTime: customFormat ? customFormat(date, 'HH:mm:ss') : format(date, 'HH:mm:ss'),\n  };\n};\n"],"names":["tz","format","dateFormatOptionsWithTimeZone","dateFormatOptions","timeZone","lowerTimeZone","toLowerCase","formatWithTimeZone","date","formatString","in","getGMTOffset","lower","resolvedTimeZone","Intl","DateTimeFormat","resolvedOptions","formatter","timeZoneName","parts","formatToParts","Date","tzPart","find","p","type","value","getFormattedAxisLabel","rangeMs","dayMs","monthMs","yearMs","year","month","day","getDateAndTime","timeMs","customFormat","formattedDate","formattedTime"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,EAAE,QAAQ,eAAe;AAClC,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,SAASC,8BACdC,iBAA6C,EAC7CC,QAAiB;IAEjB;;;;GAIC,GACD,IAAIA,UAAU;QACZ,MAAMC,gBAAgBD,SAASE,WAAW;QAC1C,IAAID,kBAAkB,WAAWA,kBAAkB,WAAW;YAC5D,OAAO;gBACL,GAAGF,iBAAiB;gBACpBC,UAAUC,kBAAkB,QAAQ,QAAQD;YAC9C;QACF;IACF;IACA,OAAOD;AACT;AAEA,OAAO,SAASI,mBAAmBC,IAAU,EAAEC,YAAoB,EAAEL,QAAiB;IACpF;;;;GAIC,GACD,MAAMC,gBAAgBD,UAAUE;IAChC,IAAI,CAACF,YAAYC,kBAAkB,WAAWA,kBAAkB,WAAW;QACzE,OAAOJ,OAAOO,MAAMC;IACtB,OAAO;QACL,OAAOR,OAAOO,MAAMC,cAAc;YAAEC,IAAIV,GAAGK,kBAAkB,QAAQ,QAAQD;QAAU;IACzF;AACF;AAEA,OAAO,SAASO,aAAaP,QAAiB;IAC5C,MAAMQ,QAAQR,UAAUE;IAExB,MAAMO,mBACJ,CAACT,YAAYQ,UAAU,WAAWA,UAAU,YACxCE,KAAKC,cAAc,GAAGC,eAAe,GAAGZ,QAAQ,GAChDQ,UAAU,QACR,QACAR;IAER,IAAI;QACF,MAAMa,YAAY,IAAIH,KAAKC,cAAc,CAAC,SAAS;YACjDX,UAAUS;YACVK,cAAc;QAChB;QAEA,MAAMC,QAAQF,UAAUG,aAAa,CAAC,IAAIC;QAC1C,MAAMC,SAASH,MAAMI,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAK;QAE5C,MAAMC,QAAQJ,QAAQI,SAAS;QAE/B,IAAIA,UAAU,OAAO,OAAO;QAC5B,OAAOA;IACT,EAAE,OAAM;QACN,OAAO;IACT;AACF;AAEA,sEAAsE;AACtE,OAAO,SAASC,sBAAsBC,OAAe;IAOnD,MAAMC,QAAQ;IACd,MAAMC,UAAU;IAChB,MAAMC,SAAS;IAEf,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,6BAA6B;IAC7B,IAAIH,UAAUC,QAAQ,KAAKD,UAAUE,UAAU,GAAG;QAChD,OAAO,aAAa,QAAQ;IAC9B;IAEA,uBAAuB;IACvB,IAAIF,UAAUC,QAAQ,KAAKD,WAAWC,QAAQ,GAAG;QAC/C,OAAO,uBAAuB,cAAc;IAC9C;IAEA,OAAO;QACLG,MAAM;QACNC,OAAO;QACPC,KAAK;IACP;AACF;AAOA,OAAO,MAAMC,iBAAiB,CAC5BC,QACAC;IAEA,IAAI,CAACD,QAAQ;QACX,OAAO;YAAEE,eAAe;YAAIC,eAAe;QAAG;IAChD;IACA,MAAM/B,OAAO,IAAIa,KAAKe;IACtB,OAAO;QACLE,eAAeD,eAAeA,aAAa7B,MAAM,kBAAkBP,OAAOO,MAAM;QAChF+B,eAAeF,eAAeA,aAAa7B,MAAM,cAAcP,OAAOO,MAAM;IAC9E;AACF,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.54.0-beta.6",
+  "version": "0.54.0-beta.8",
   "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,8 @@
     "@date-fns/tz": "^1.4.1",
     "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
-    "@perses-dev/spec": "0.2.0-beta.2",
-    "@perses-dev/client": "0.54.0-beta.6",
+    "@perses-dev/spec": "0.2.0-beta.6",
+    "@perses-dev/client": "0.54.0-beta.8",
     "numbro": "^2.3.6",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",