@perses-dev/components 0.2.0 → 0.3.1

package/dist/tooltip/TooltipContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/tooltip/TooltipContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAgExD"}

package/dist/tooltip/TooltipContent.js

@@ -0,0 +1 @@
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useMemo}from"react";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesInfo}from"./SeriesInfo";export function TooltipContent(r){const{focusedSeries:e,wrapLabels:t}=r,s=e&&e[0]&&e[0].date?e[0].date:null,o=useMemo((()=>null===e?null:e.sort(((r,e)=>r.y>e.y?-1:1))),[e]);return null!==o&&null!==s?_jsxs(Stack,{py:1,px:1.5,spacing:.5,children:[_jsx(Typography,{variant:"caption",children:(r=>{const[e,t,s]=r.split(",");return _jsxs(_Fragment,{children:[_jsxs(Typography,{variant:"caption",sx:r=>({color:r.palette.common.white}),children:[e,", ",t," –"]}),_jsx(Typography,{variant:"caption",children:_jsx("strong",{children:s})})]})})(s)}),_jsx(Divider,{sx:r=>({borderColor:r.palette.grey[500]})}),_jsx(Box,{sx:{display:"table"},children:o.map((({datumIdx:r,seriesIdx:e,seriesName:s,y:n,markerColor:a})=>{if(null===r||null===e)return null;const i=e.toString()+r.toString();return _jsx(SeriesInfo,{seriesName:s,y:n,markerColor:a,totalSeries:o.length,wrapLabels:t},i)}))})]}):_jsx(_Fragment,{})}

package/dist/tooltip/focused-series.d.ts

@@ -0,0 +1,24 @@
+import { ECharts as EChartsInstance } from 'echarts/core';
+import { EChartsDataFormat } from '../model/graph-model';
+import { CursorData } from './tooltip-model';
+export interface FocusedSeriesInfo {
+    seriesIdx: number | null;
+    datumIdx: number | null;
+    seriesName: string;
+    date: string;
+    markerColor: string;
+    x: number;
+    y: number;
+}
+export declare type FocusedSeriesArray = FocusedSeriesInfo[];
+/**
+ * Returns formatted series data for the points that are close to the user's cursor
+ * Adjust yBuffer to increase or decrease number of series shown
+ */
+export declare function getNearbySeries(data: EChartsDataFormat, pointInGrid: number[], yBuffer: number): FocusedSeriesArray;
+/**
+ * Uses mouse position to determine whether user is hovering over a chart canvas
+ * If yes, convert from pixel values to logical cartesian coordinates and return all focused series
+ */
+export declare function getFocusedSeriesData(mousePos: CursorData['coords'], chartData: EChartsDataFormat, pinnedPos: CursorData['coords'], chart?: EChartsInstance): FocusedSeriesArray;
+//# sourceMappingURL=focused-series.d.ts.map

package/dist/tooltip/focused-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/tooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,kBAAkB,CAwCnH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,sBA2CxB"}

package/dist/tooltip/focused-series.js

@@ -0,0 +1 @@
+import{TOOLTIP_DATE_FORMAT,TOOLTIP_MAX_ITEMS}from"./tooltip-model";export function getNearbySeries(e,t,r){var i,n,l,o,a;const s=[],u=null!==(i=t[0])&&void 0!==i?i:null,d=null!==(n=t[1])&&void 0!==n?n:null;if(null===u||null===d)return s;if(Array.isArray(e.xAxis)&&Array.isArray(e.timeSeries))for(let t=0;t<e.timeSeries.length;t++){const i=e.timeSeries[t];if(s.length>TOOLTIP_MAX_ITEMS)break;if(void 0!==i){const n=i.name?i.name.toString():"",m=null!==(l=i.color)&&void 0!==l?l:"#000";if(Array.isArray(i.data))for(let l=0;l<i.data.length;l++){const f=null!==(o=e.xAxis[l])&&void 0!==o?o:0,v=null!==(a=i.data[l])&&void 0!==a?a:0;if(u===l&&"-"!==v&&d<=v+r&&d>=v-r){const e=TOOLTIP_DATE_FORMAT.format(1e3*f);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:e,x:f,y:v,markerColor:m.toString()})}}}}return s}export function getFocusedSeriesData(e,t,r,i){var n,l;if(void 0===i||null===e)return[];let o=!1;if(null!==e.target){const t=e.target.parentElement;if(null!==t){const e=t.parentElement;null!==e&&i.getDom()===e&&(o=!0)}}if(null!==r&&(e=r,o=!0),!1===o)return[];if(void 0===i._model)return[];const a=i._model.getComponent("yAxis").axis.scale._interval,s=t.timeSeries.length>TOOLTIP_MAX_ITEMS?.5*a:2*a,u=[null!==(n=e.plotCanvas.x)&&void 0!==n?n:0,null!==(l=e.plotCanvas.y)&&void 0!==l?l:0];if(i.containPixel("grid",u)){const e=i.convertFromPixel("grid",u);if(void 0!==e[0]&&void 0!==e[1])return getNearbySeries(t,e,s)}return[]}

package/dist/tooltip/tooltip-model.d.ts

@@ -0,0 +1,79 @@
+import { FocusedSeriesArray } from './focused-series';
+export declare const TOOLTIP_MAX_WIDTH = 650;
+export declare const TOOLTIP_MAX_HEIGHT = 230;
+export declare const TOOLTIP_LABELS_MAX_WIDTH: number;
+export declare const TOOLTIP_MAX_ITEMS = 50;
+export declare const TOOLTIP_DATE_FORMAT: Intl.DateTimeFormat;
+export declare const defaultCursorData: {
+    coords: {
+        viewport: {
+            x: number;
+            y: number;
+        };
+        plotCanvas: {
+            x: number;
+            y: number;
+        };
+        zrender: {
+            x: number;
+            y: number;
+        };
+        target: null;
+    };
+    chartWidth: number;
+};
+export declare const emptyTooltipData: {
+    cursor: {
+        coords: {
+            viewport: {
+                x: number;
+                y: number;
+            };
+            plotCanvas: {
+                x: number;
+                y: number;
+            };
+            zrender: {
+                x: number;
+                y: number;
+            };
+            target: null;
+        };
+        chartWidth: number;
+    };
+    focusedSeries: null;
+};
+export interface CursorCoordinates {
+    viewport: {
+        x: number;
+        y: number;
+    };
+    plotCanvas: {
+        x: number;
+        y: number;
+    };
+    zrender: {
+        x?: number;
+        y?: number;
+    };
+    target: EventTarget | null;
+}
+export interface CursorData {
+    coords: CursorCoordinates | null;
+    chartWidth?: number;
+}
+export interface TooltipData {
+    focusedSeries: FocusedSeriesArray | null;
+    cursor: CursorData;
+}
+declare type ZREventProperties = {
+    zrX?: number;
+    zrY?: number;
+    zrDelta?: number;
+    zrEventControl?: 'no_globalout' | 'only_globalout';
+    zrByTouch?: boolean;
+};
+export declare type ZRRawMouseEvent = MouseEvent & ZREventProperties;
+export declare const useMousePosition: () => CursorData['coords'];
+export {};
+//# sourceMappingURL=tooltip-model.d.ts.map

package/dist/tooltip/tooltip-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/tooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiB7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE;QACR,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,OAAO,EAAE;QACP,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAgCtD,CAAC"}

package/dist/tooltip/tooltip-model.js

@@ -0,0 +1 @@
+import{useEffect,useState}from"react";export const TOOLTIP_MAX_WIDTH=650;export const TOOLTIP_MAX_HEIGHT=230;export const TOOLTIP_LABELS_MAX_WIDTH=500;export const TOOLTIP_MAX_ITEMS=50;export const TOOLTIP_DATE_FORMAT=new Intl.DateTimeFormat(void 0,{year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",hour12:!0});export const defaultCursorData={coords:{viewport:{x:0,y:0},plotCanvas:{x:0,y:0},zrender:{x:0,y:0},target:null},chartWidth:0};export const emptyTooltipData={cursor:defaultCursorData,focusedSeries:null};export const useMousePosition=()=>{const[e,t]=useState(null);return useEffect((()=>{const e=e=>t({viewport:{x:e.clientX,y:e.clientY},plotCanvas:{x:e.offsetX,y:e.offsetY},zrender:{x:e.zrX,y:e.zrY},target:e.target});return window.addEventListener("mousemove",e),()=>{window.removeEventListener("mousemove",e)}}),[]),e};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -12,19 +12,23 @@
     "url": "https://github.com/perses/perses/issues"
   },
   "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist/",
-    "build": "tsc",
+    "build": "tsc --build",
+    "build:cjs": "tsc --project ./tsconfig.cjs.json",
     "test": "echo 'no test to run' && exit 0",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@mui/material": "^5.5.1",
+    "echarts": "^5.3.2",
+    "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
+    "@mui/material": "^5.5.1",
     "react": "^17.0.2"
   },
   "files": [