@red-hat-developer-hub/backstage-plugin-adoption-insights 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @red-hat-developer-hub/backstage-plugin-adoption-insights
+
+## 0.0.2
+
+### Patch Changes
+
+- 480aa8e: Release Adoption insights plugin
+- Updated dependencies [480aa8e]
+  - @red-hat-developer-hub/backstage-plugin-adoption-insights-common@0.1.1

package/README.md

@@ -0,0 +1,88 @@
+# Adoption Insights Plugin for Backstage
+
+The Adoption Insights plugin provides an interactive dashboard to visualize analytics data in Backstage. This frontend plugin integrates with the Adoption Insights backend to deliver insights into adoption trends and usage statistics.
+
+## Getting started
+
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/adoption-insights](http://localhost:3000/adoption-insights).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
+
+## For Administrators
+
+### Prerequisites
+
+Before installing the frontend plugin, ensure that the Adoption Insights backend is integrated into your Backstage instance. Follow the [Adoption Insights backend plugin README](https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/adoption-insights/plugins/adoption-insights-backend/README.md) for setup instructions.
+
+### Installation
+
+To install the Adoption Insights plugin, run the following command:
+
+```sh
+yarn workspace app add @red-hat-developer-hub/backstage-plugin-adoption-insights
+```
+
+**Note**
+
+### Permission Framework Support
+
+The Adoption Insights plugin has support for the permission framework.
+
+- When [RBAC permission](https://github.com/backstage/community-plugins/tree/main/workspaces/rbac/plugins/rbac-backend#installation) framework is enabled, for non-admin users to access adoption insights UI, the role associated with your user should have the following permission policies associated with it. Add the following in your permission policies configuration file named `rbac-policy.csv`:
+
+```CSV
+p, role:default/team_a, adoption-insights.events.read, read, ALLOW
+
+g, user:default/<your-user-name>, role:default/team_a
+```
+
+You can specify the path to this configuration file in your application configuration:
+
+```yaml
+permission:
+  enabled: true
+  rbac:
+    policies-csv-file: /some/path/rbac-policy.csv
+    policyFileReload: true
+```
+
+### Configuration
+
+1. Add the **Adoption Insights** page to your Backstage application by modifying `packages/app/src/App.tsx`:
+
+   ```tsx
+   import { AdoptionInsightsPage } from '@red-hat-developer-hub/backstage-plugin-adoption-insights';
+
+   <Route path="/adoption-insights" element={<AdoptionInsightsPage />} />;
+   ```
+
+2. Add a navigation item to the Backstage sidebar by updating `packages/app/src/components/Root/Root.tsx`:
+
+   ```tsx
+   import QueryStatsIcon from '@mui/icons-material/QueryStats';
+
+   <SidebarItem
+     icon={QueryStatsIcon}
+     to="adoption-insights"
+     text="Adoption Insights"
+   />;
+   ```
+
+## For Users
+
+### Using the Adoption Insights Plugin
+
+The Adoption Insights plugin allows users to explore analytics data through an interactive dashboard.
+
+#### Prerequisites
+
+- A running Backstage application.
+- The Adoption Insights plugin is installed and configured. See [Installation](#installation) for setup instructions.
+
+#### Accessing the Plugin
+
+1. Open your Backstage application.
+2. Navigate to the **Adoption Insights** section from the sidebar.
+3. Explore and analyze adoption metrics using the interactive dashboard.

package/app-config.dynamic.yaml

@@ -0,0 +1,16 @@
+dynamicPlugins:
+  frontend:
+    red-hat-developer-hub.backstage-plugin-adoption-insights:
+      appIcons:
+        - name: adoptionInsightsIcon
+          importName: AdoptionInsightsIcon
+      dynamicRoutes:
+        - path: /adoption-insights
+          importName: AdoptionInsightsPage
+          menuItem:
+            icon: adoptionInsightsIcon
+            text: Adoption Insights
+      menuItems:
+        adoption-insights:
+          parent: admin
+          icon: adoptionInsightsIcon

package/dist/api/index.esm.js

@@ -0,0 +1,106 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+import { generateEventsUrl } from '../utils/utils.esm.js';
+
+const adoptionInsightsApiRef = createApiRef({
+  id: "plugin.adoption-insights.service"
+});
+class AdoptionInsightsApiClient {
+  configApi;
+  fetchApi;
+  constructor(options) {
+    this.configApi = options.configApi;
+    this.fetchApi = options.fetchApi;
+  }
+  async getBaseUrl() {
+    return `${this.configApi.getString(
+      "backend.baseUrl"
+    )}/api/adoption-insights`;
+  }
+  async getActiveUsers(options) {
+    if (!options.start_date || !options.end_date) {
+      return Promise.resolve({ grouping: void 0, data: [] });
+    }
+    const baseUrl = await this.getBaseUrl();
+    const url = generateEventsUrl(`${baseUrl}/events`, options);
+    const response = await this.fetchApi.fetch(url);
+    const data = await response.json();
+    return data;
+  }
+  async getUsers(options) {
+    if (!options.start_date || !options.end_date) {
+      return Promise.resolve({ data: [] });
+    }
+    const baseUrl = await this.getBaseUrl();
+    const url = generateEventsUrl(`${baseUrl}/events`, options);
+    const response = await this.fetchApi.fetch(url);
+    const data = await response.json();
+    return data;
+  }
+  async getCatalogEntities(options) {
+    if (!options.start_date || !options.end_date) {
+      return Promise.resolve({ data: [] });
+    }
+    const baseUrl = await this.getBaseUrl();
+    const url = generateEventsUrl(`${baseUrl}/events`, options);
+    const response = await this.fetchApi.fetch(url);
+    const data = await response.json();
+    return data;
+  }
+  async getTemplates(options) {
+    if (!options.start_date || !options.end_date) {
+      return Promise.resolve({ data: [] });
+    }
+    const baseUrl = await this.getBaseUrl();
+    const url = generateEventsUrl(`${baseUrl}/events`, options);
+    const response = await this.fetchApi.fetch(url);
+    const data = await response.json();
+    return data;
+  }
+  async getTechdocs(options) {
+    if (!options.start_date || !options.end_date) {
+      return Promise.resolve({ data: [] });
+    }
+    const baseUrl = await this.getBaseUrl();
+    const url = generateEventsUrl(`${baseUrl}/events`, options);
+    const response = await this.fetchApi.fetch(url);
+    const data = await response.json();
+    return data;
+  }
+  async getPlugins(options) {
+    if (!options.start_date || !options.end_date) {
+      return Promise.resolve({ data: [] });
+    }
+    const baseUrl = await this.getBaseUrl();
+    const url = generateEventsUrl(`${baseUrl}/events`, options);
+    const response = await this.fetchApi.fetch(url);
+    const data = await response.json();
+    return data;
+  }
+  async getSearches(options) {
+    if (!options.start_date || !options.end_date) {
+      return Promise.resolve({ grouping: void 0, data: [] });
+    }
+    const baseUrl = await this.getBaseUrl();
+    const url = generateEventsUrl(`${baseUrl}/events`, options);
+    const response = await this.fetchApi.fetch(url);
+    const data = await response.json();
+    return data;
+  }
+  async downloadBlob(options) {
+    const baseUrl = await this.getBaseUrl();
+    const response = await this.fetchApi.fetch(
+      `${baseUrl}/events?type=${options.type}&start_date=${options.start_date}&end_date=${options.end_date}&format=${options.format}`
+    );
+    const blob = await response.blob();
+    const blobUrl = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = options.blobName ?? "active-users";
+    document.body.appendChild(link);
+    link.click();
+    link.parentNode?.removeChild(link);
+  }
+}
+
+export { AdoptionInsightsApiClient, adoptionInsightsApiRef };
+//# sourceMappingURL=index.esm.js.map

package/dist/api/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/api/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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 { createApiRef, ConfigApi, FetchApi } from '@backstage/core-plugin-api';\nimport {\n  AdoptionInsightsApi,\n  APIsViewOptions,\n  TemplatesResponse,\n  CatalogEntitiesResponse,\n  PluginTrendResponse,\n  UsersResponse,\n  TechdocsResponse,\n  ActiveUsersResponse,\n  SearchesResponse,\n} from '../types';\nimport { generateEventsUrl } from '../utils/utils';\n\nexport interface InsightsApi {\n  downloadBlob(options: APIsViewOptions): Promise<any>;\n  getActiveUsers(options: APIsViewOptions): Promise<ActiveUsersResponse>;\n  getUsers(options: APIsViewOptions): Promise<UsersResponse>;\n  getCatalogEntities(\n    options: APIsViewOptions,\n  ): Promise<CatalogEntitiesResponse>;\n  getTemplates(options: APIsViewOptions): Promise<TemplatesResponse>;\n  getTechdocs(options: APIsViewOptions): Promise<TechdocsResponse>;\n  getPlugins(options: APIsViewOptions): Promise<PluginTrendResponse>;\n  getSearches(options: APIsViewOptions): Promise<SearchesResponse>;\n}\n\nexport const adoptionInsightsApiRef = createApiRef<AdoptionInsightsApi>({\n  id: 'plugin.adoption-insights.service',\n});\n\nexport type Options = {\n  configApi: ConfigApi;\n  fetchApi: FetchApi;\n};\n\nexport class AdoptionInsightsApiClient implements AdoptionInsightsApi {\n  private readonly configApi: ConfigApi;\n  private readonly fetchApi: FetchApi;\n\n  constructor(options: Options) {\n    this.configApi = options.configApi;\n    this.fetchApi = options.fetchApi;\n  }\n\n  async getBaseUrl() {\n    return `${this.configApi.getString(\n      'backend.baseUrl',\n    )}/api/adoption-insights`;\n  }\n\n  async getActiveUsers(options: APIsViewOptions): Promise<ActiveUsersResponse> {\n    if (!options.start_date || !options.end_date) {\n      return Promise.resolve({ grouping: undefined, data: [] });\n    }\n\n    const baseUrl = await this.getBaseUrl();\n    const url = generateEventsUrl(`${baseUrl}/events`, options);\n\n    const response = await this.fetchApi.fetch(url);\n\n    const data = await response.json();\n    return data as ActiveUsersResponse;\n  }\n\n  async getUsers(options: APIsViewOptions): Promise<UsersResponse> {\n    if (!options.start_date || !options.end_date) {\n      return Promise.resolve({ data: [] });\n    }\n\n    const baseUrl = await this.getBaseUrl();\n    const url = generateEventsUrl(`${baseUrl}/events`, options);\n\n    const response = await this.fetchApi.fetch(url);\n\n    const data = await response.json();\n    return data as UsersResponse;\n  }\n\n  async getCatalogEntities(\n    options: APIsViewOptions,\n  ): Promise<CatalogEntitiesResponse> {\n    if (!options.start_date || !options.end_date) {\n      return Promise.resolve({ data: [] });\n    }\n\n    const baseUrl = await this.getBaseUrl();\n    const url = generateEventsUrl(`${baseUrl}/events`, options);\n\n    const response = await this.fetchApi.fetch(url);\n\n    const data = await response.json();\n    return data as CatalogEntitiesResponse;\n  }\n\n  async getTemplates(options: APIsViewOptions): Promise<TemplatesResponse> {\n    if (!options.start_date || !options.end_date) {\n      return Promise.resolve({ data: [] });\n    }\n\n    const baseUrl = await this.getBaseUrl();\n    const url = generateEventsUrl(`${baseUrl}/events`, options);\n\n    const response = await this.fetchApi.fetch(url);\n\n    const data = await response.json();\n    return data as TemplatesResponse;\n  }\n\n  async getTechdocs(options: APIsViewOptions): Promise<TechdocsResponse> {\n    if (!options.start_date || !options.end_date) {\n      return Promise.resolve({ data: [] });\n    }\n\n    const baseUrl = await this.getBaseUrl();\n    const url = generateEventsUrl(`${baseUrl}/events`, options);\n\n    const response = await this.fetchApi.fetch(url);\n\n    const data = await response.json();\n    return data as TechdocsResponse;\n  }\n\n  async getPlugins(options: APIsViewOptions): Promise<PluginTrendResponse> {\n    if (!options.start_date || !options.end_date) {\n      return Promise.resolve({ data: [] });\n    }\n\n    const baseUrl = await this.getBaseUrl();\n    const url = generateEventsUrl(`${baseUrl}/events`, options);\n\n    const response = await this.fetchApi.fetch(url);\n\n    const data = await response.json();\n    return data as PluginTrendResponse;\n  }\n\n  async getSearches(options: APIsViewOptions): Promise<SearchesResponse> {\n    if (!options.start_date || !options.end_date) {\n      return Promise.resolve({ grouping: undefined, data: [] });\n    }\n\n    const baseUrl = await this.getBaseUrl();\n    const url = generateEventsUrl(`${baseUrl}/events`, options);\n\n    const response = await this.fetchApi.fetch(url);\n\n    const data = await response.json();\n    return data as SearchesResponse;\n  }\n\n  async downloadBlob(options: APIsViewOptions): Promise<void> {\n    const baseUrl = await this.getBaseUrl();\n    const response = await this.fetchApi.fetch(\n      `${baseUrl}/events?type=${options.type}&start_date=${options.start_date}&end_date=${options.end_date}&format=${options.format}`,\n    );\n    const blob = await response.blob();\n    const blobUrl = window.URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    link.href = blobUrl;\n    link.download = options.blobName ?? 'active-users';\n    document.body.appendChild(link);\n    link.click();\n    link.parentNode?.removeChild(link);\n  }\n}\n"],"names":[],"mappings":";;;AA0CO,MAAM,yBAAyB,YAAkC,CAAA;AAAA,EACtE,EAAI,EAAA;AACN,CAAC;AAOM,MAAM,yBAAyD,CAAA;AAAA,EACnD,SAAA;AAAA,EACA,QAAA;AAAA,EAEjB,YAAY,OAAkB,EAAA;AAC5B,IAAA,IAAA,CAAK,YAAY,OAAQ,CAAA,SAAA;AACzB,IAAA,IAAA,CAAK,WAAW,OAAQ,CAAA,QAAA;AAAA;AAC1B,EAEA,MAAM,UAAa,GAAA;AACjB,IAAO,OAAA,CAAA,EAAG,KAAK,SAAU,CAAA,SAAA;AAAA,MACvB;AAAA,KACD,CAAA,sBAAA,CAAA;AAAA;AACH,EAEA,MAAM,eAAe,OAAwD,EAAA;AAC3E,IAAA,IAAI,CAAC,OAAA,CAAQ,UAAc,IAAA,CAAC,QAAQ,QAAU,EAAA;AAC5C,MAAO,OAAA,OAAA,CAAQ,QAAQ,EAAE,QAAA,EAAU,QAAW,IAAM,EAAA,IAAI,CAAA;AAAA;AAG1D,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAA,MAAM,GAAM,GAAA,iBAAA,CAAkB,CAAG,EAAA,OAAO,WAAW,OAAO,CAAA;AAE1D,IAAA,MAAM,QAAW,GAAA,MAAM,IAAK,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AAE9C,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,MAAM,SAAS,OAAkD,EAAA;AAC/D,IAAA,IAAI,CAAC,OAAA,CAAQ,UAAc,IAAA,CAAC,QAAQ,QAAU,EAAA;AAC5C,MAAA,OAAO,QAAQ,OAAQ,CAAA,EAAE,IAAM,EAAA,IAAI,CAAA;AAAA;AAGrC,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAA,MAAM,GAAM,GAAA,iBAAA,CAAkB,CAAG,EAAA,OAAO,WAAW,OAAO,CAAA;AAE1D,IAAA,MAAM,QAAW,GAAA,MAAM,IAAK,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AAE9C,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,MAAM,mBACJ,OACkC,EAAA;AAClC,IAAA,IAAI,CAAC,OAAA,CAAQ,UAAc,IAAA,CAAC,QAAQ,QAAU,EAAA;AAC5C,MAAA,OAAO,QAAQ,OAAQ,CAAA,EAAE,IAAM,EAAA,IAAI,CAAA;AAAA;AAGrC,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAA,MAAM,GAAM,GAAA,iBAAA,CAAkB,CAAG,EAAA,OAAO,WAAW,OAAO,CAAA;AAE1D,IAAA,MAAM,QAAW,GAAA,MAAM,IAAK,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AAE9C,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,MAAM,aAAa,OAAsD,EAAA;AACvE,IAAA,IAAI,CAAC,OAAA,CAAQ,UAAc,IAAA,CAAC,QAAQ,QAAU,EAAA;AAC5C,MAAA,OAAO,QAAQ,OAAQ,CAAA,EAAE,IAAM,EAAA,IAAI,CAAA;AAAA;AAGrC,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAA,MAAM,GAAM,GAAA,iBAAA,CAAkB,CAAG,EAAA,OAAO,WAAW,OAAO,CAAA;AAE1D,IAAA,MAAM,QAAW,GAAA,MAAM,IAAK,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AAE9C,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,MAAM,YAAY,OAAqD,EAAA;AACrE,IAAA,IAAI,CAAC,OAAA,CAAQ,UAAc,IAAA,CAAC,QAAQ,QAAU,EAAA;AAC5C,MAAA,OAAO,QAAQ,OAAQ,CAAA,EAAE,IAAM,EAAA,IAAI,CAAA;AAAA;AAGrC,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAA,MAAM,GAAM,GAAA,iBAAA,CAAkB,CAAG,EAAA,OAAO,WAAW,OAAO,CAAA;AAE1D,IAAA,MAAM,QAAW,GAAA,MAAM,IAAK,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AAE9C,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,MAAM,WAAW,OAAwD,EAAA;AACvE,IAAA,IAAI,CAAC,OAAA,CAAQ,UAAc,IAAA,CAAC,QAAQ,QAAU,EAAA;AAC5C,MAAA,OAAO,QAAQ,OAAQ,CAAA,EAAE,IAAM,EAAA,IAAI,CAAA;AAAA;AAGrC,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAA,MAAM,GAAM,GAAA,iBAAA,CAAkB,CAAG,EAAA,OAAO,WAAW,OAAO,CAAA;AAE1D,IAAA,MAAM,QAAW,GAAA,MAAM,IAAK,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AAE9C,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,MAAM,YAAY,OAAqD,EAAA;AACrE,IAAA,IAAI,CAAC,OAAA,CAAQ,UAAc,IAAA,CAAC,QAAQ,QAAU,EAAA;AAC5C,MAAO,OAAA,OAAA,CAAQ,QAAQ,EAAE,QAAA,EAAU,QAAW,IAAM,EAAA,IAAI,CAAA;AAAA;AAG1D,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAA,MAAM,GAAM,GAAA,iBAAA,CAAkB,CAAG,EAAA,OAAO,WAAW,OAAO,CAAA;AAE1D,IAAA,MAAM,QAAW,GAAA,MAAM,IAAK,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AAE9C,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,MAAM,aAAa,OAAyC,EAAA;AAC1D,IAAM,MAAA,OAAA,GAAU,MAAM,IAAA,CAAK,UAAW,EAAA;AACtC,IAAM,MAAA,QAAA,GAAW,MAAM,IAAA,CAAK,QAAS,CAAA,KAAA;AAAA,MACnC,CAAG,EAAA,OAAO,CAAgB,aAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,YAAA,EAAe,OAAQ,CAAA,UAAU,CAAa,UAAA,EAAA,OAAA,CAAQ,QAAQ,CAAA,QAAA,EAAW,QAAQ,MAAM,CAAA;AAAA,KAC/H;AACA,IAAM,MAAA,IAAA,GAAO,MAAM,QAAA,CAAS,IAAK,EAAA;AACjC,IAAA,MAAM,OAAU,GAAA,MAAA,CAAO,GAAI,CAAA,eAAA,CAAgB,IAAI,CAAA;AAC/C,IAAM,MAAA,IAAA,GAAO,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA;AACvC,IAAA,IAAA,CAAK,IAAO,GAAA,OAAA;AACZ,IAAK,IAAA,CAAA,QAAA,GAAW,QAAQ,QAAY,IAAA,cAAA;AACpC,IAAS,QAAA,CAAA,IAAA,CAAK,YAAY,IAAI,CAAA;AAC9B,IAAA,IAAA,CAAK,KAAM,EAAA;AACX,IAAK,IAAA,CAAA,UAAA,EAAY,YAAY,IAAI,CAAA;AAAA;AAErC;;;;"}

package/dist/components/ActiveUsers/ActiveUsers.esm.js

@@ -0,0 +1,125 @@
+import React__default from 'react';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import CircularProgress from '@mui/material/CircularProgress';
+import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, Area, Legend } from 'recharts';
+import CardWrapper from '../CardWrapper/CardWrapper.esm.js';
+import CustomTooltip from './CustomTooltip.esm.js';
+import CustomCursor from '../Common/CustomCursor.esm.js';
+import CustomLegend from './CustomLegend.esm.js';
+import { getAverage, getXAxisTickValues, getXAxisformat } from '../../utils/utils.esm.js';
+import { useActiveUsers } from '../../hooks/useActiveUsers.esm.js';
+import { Typography } from '@material-ui/core';
+import ExportCSVButton from './ExportCSVButton.esm.js';
+import EmptyChartState from '../Common/EmptyChartState.esm.js';
+
+const ActiveUsers = () => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+  const { activeUsers, loading } = useActiveUsers();
+  const { data, grouping = "daily" } = activeUsers;
+  if (!data || data?.length === 0 || !data?.[0] && !loading) {
+    return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: "Active users" }, /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: 200
+      },
+      /* @__PURE__ */ React__default.createElement(EmptyChartState, null)
+    ));
+  }
+  return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: "Active users", filter: /* @__PURE__ */ React__default.createElement(ExportCSVButton, null) }, loading ? /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: 200
+    },
+    /* @__PURE__ */ React__default.createElement(CircularProgress, null)
+  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Typography, { style: { margin: "20px 36px" } }, /* @__PURE__ */ React__default.createElement("b", null, `${Math.round(
+    getAverage(data, "total_users")
+  ).toLocaleString()} active users per ${grouping === "hourly" ? "hour" : "day"}`), " ", "were conducted during this period."), /* @__PURE__ */ React__default.createElement(Box, { sx: { height: 310, mt: 4, mb: 4, ml: 0, mr: 0 } }, /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React__default.createElement(
+    AreaChart,
+    {
+      data,
+      margin: { top: 10, right: 50, left: 20, bottom: 0 }
+    },
+    /* @__PURE__ */ React__default.createElement("defs", null, /* @__PURE__ */ React__default.createElement("linearGradient", { id: "new_users", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React__default.createElement("stop", { offset: "5%", stopColor: "#1976d2", stopOpacity: 0.8 }), /* @__PURE__ */ React__default.createElement("stop", { offset: "95%", stopColor: "#1976d2", stopOpacity: 0.2 })), /* @__PURE__ */ React__default.createElement(
+      "linearGradient",
+      {
+        id: "returning_users",
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1"
+      },
+      /* @__PURE__ */ React__default.createElement("stop", { offset: "5%", stopColor: "#B8BBBE", stopOpacity: 0.8 }),
+      /* @__PURE__ */ React__default.createElement("stop", { offset: "95%", stopColor: "#B8BBBE", stopOpacity: 0.2 })
+    )),
+    /* @__PURE__ */ React__default.createElement(
+      CartesianGrid,
+      {
+        stroke: isDarkMode ? "#666" : "#E5E7EB",
+        strokeDasharray: 0,
+        vertical: false
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      XAxis,
+      {
+        dataKey: "date",
+        tickFormatter: (date) => getXAxisformat(date, grouping),
+        ticks: getXAxisTickValues(data, grouping),
+        tick: { fill: theme.palette.text.primary },
+        axisLine: false,
+        tickLine: false,
+        padding: { left: 30, right: 30 },
+        tickMargin: 10
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      YAxis,
+      {
+        tick: { fill: theme.palette.text.primary },
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (value) => value.toLocaleString(),
+        tickMargin: 20
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Tooltip,
+      {
+        cursor: /* @__PURE__ */ React__default.createElement(CustomCursor, { cursorHeight: 250 }),
+        content: /* @__PURE__ */ React__default.createElement(CustomTooltip, { grouping })
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Area,
+      {
+        type: "linear",
+        dataKey: "returning_users",
+        stroke: "#555",
+        fill: "url(#returning_users)",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Area,
+      {
+        type: "linear",
+        dataKey: "new_users",
+        stroke: "#1976d2",
+        fill: "url(#new_users)",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(Legend, { content: /* @__PURE__ */ React__default.createElement(CustomLegend, null) })
+  )))));
+};
+
+export { ActiveUsers as default };
+//# sourceMappingURL=ActiveUsers.esm.js.map

package/dist/components/ActiveUsers/ActiveUsers.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveUsers.esm.js","sources":["../../../src/components/ActiveUsers/ActiveUsers.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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 React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {\n  AreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n  Tooltip,\n  Area,\n  Legend,\n} from 'recharts';\n\nimport CardWrapper from '../CardWrapper';\nimport CustomTooltip from './CustomTooltip';\nimport CustomCursor from '../Common/CustomCursor';\nimport CustomLegend from './CustomLegend';\nimport {\n  getAverage,\n  getXAxisformat,\n  getXAxisTickValues,\n} from '../../utils/utils';\nimport { useActiveUsers } from '../../hooks/useActiveUsers';\nimport { Typography } from '@material-ui/core';\nimport ExportCSVButton from './ExportCSVButton';\nimport EmptyChartState from '../Common/EmptyChartState';\n\nconst ActiveUsers = () => {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const { activeUsers, loading } = useActiveUsers();\n  const { data, grouping = 'daily' } = activeUsers;\n\n  if (!data || data?.length === 0 || (!data?.[0] && !loading)) {\n    return (\n      <CardWrapper title=\"Active users\">\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <EmptyChartState />\n        </Box>\n      </CardWrapper>\n    );\n  }\n\n  return (\n    <CardWrapper title=\"Active users\" filter={<ExportCSVButton />}>\n      {loading ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <CircularProgress />\n        </Box>\n      ) : (\n        <>\n          <Typography style={{ margin: '20px 36px' }}>\n            <b>\n              {`${Math.round(\n                getAverage(data, 'total_users'),\n              ).toLocaleString()} active users per ${\n                grouping === 'hourly' ? 'hour' : 'day'\n              }`}\n            </b>{' '}\n            were conducted during this period.\n          </Typography>\n          <Box sx={{ height: 310, mt: 4, mb: 4, ml: 0, mr: 0 }}>\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart\n                data={data}\n                margin={{ top: 10, right: 50, left: 20, bottom: 0 }}\n              >\n                <defs>\n                  <linearGradient id=\"new_users\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"5%\" stopColor=\"#1976d2\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#1976d2\" stopOpacity={0.2} />\n                  </linearGradient>\n                  <linearGradient\n                    id=\"returning_users\"\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop offset=\"5%\" stopColor=\"#B8BBBE\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#B8BBBE\" stopOpacity={0.2} />\n                  </linearGradient>\n                </defs>\n\n                <CartesianGrid\n                  stroke={isDarkMode ? '#666' : '#E5E7EB'}\n                  strokeDasharray={0}\n                  vertical={false}\n                />\n\n                <XAxis\n                  dataKey=\"date\"\n                  tickFormatter={date => getXAxisformat(date, grouping)}\n                  ticks={getXAxisTickValues(data, grouping)}\n                  tick={{ fill: theme.palette.text.primary }}\n                  axisLine={false}\n                  tickLine={false}\n                  padding={{ left: 30, right: 30 }}\n                  tickMargin={10}\n                />\n                <YAxis\n                  tick={{ fill: theme.palette.text.primary }}\n                  tickLine={false}\n                  axisLine={false}\n                  tickFormatter={value => value.toLocaleString()}\n                  tickMargin={20}\n                />\n                <Tooltip\n                  cursor={<CustomCursor cursorHeight={250} />}\n                  content={<CustomTooltip grouping={grouping} />}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"returning_users\"\n                  stroke=\"#555\"\n                  fill=\"url(#returning_users)\"\n                  strokeWidth={1}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"new_users\"\n                  stroke=\"#1976d2\"\n                  fill=\"url(#new_users)\"\n                  strokeWidth={1}\n                />\n                <Legend content={<CustomLegend />} />\n              </AreaChart>\n            </ResponsiveContainer>\n          </Box>\n        </>\n      )}\n    </CardWrapper>\n  );\n};\n\nexport default ActiveUsers;\n"],"names":["React"],"mappings":"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"}

package/dist/components/ActiveUsers/CustomLegend.esm.js

@@ -0,0 +1,58 @@
+import React__default from 'react';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+
+const CustomLegend = (props) => {
+  const theme = useTheme();
+  const { payload } = props;
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 16,
+        alignItems: "center",
+        marginLeft: 50,
+        paddingTop: 10
+      }
+    },
+    payload.map((entry) => /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: entry.value,
+        style: { display: "flex", alignItems: "center", gap: 4 }
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          style: {
+            width: 20,
+            height: 3,
+            backgroundColor: entry.color
+          }
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          style: {
+            width: 20,
+            height: 4,
+            backgroundColor: entry.color,
+            opacity: "0.4"
+          }
+        }
+      )),
+      /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          variant: "body2",
+          style: { color: theme.palette.text.primary, fontSize: "0.875rem" }
+        },
+        entry.value === "new_users" ? "New users" : "Returning users"
+      )
+    ))
+  );
+};
+
+export { CustomLegend as default };
+//# sourceMappingURL=CustomLegend.esm.js.map

package/dist/components/ActiveUsers/CustomLegend.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomLegend.esm.js","sources":["../../../src/components/ActiveUsers/CustomLegend.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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 React from 'react';\n\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\n\nconst CustomLegend = (props: any) => {\n  const theme = useTheme();\n  const { payload } = props;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: 16,\n        alignItems: 'center',\n        marginLeft: 50,\n        paddingTop: 10,\n      }}\n    >\n      {payload.map((entry: any) => (\n        <div\n          key={entry.value}\n          style={{ display: 'flex', alignItems: 'center', gap: 4 }}\n        >\n          <div>\n            <div\n              style={{\n                width: 20,\n                height: 3,\n                backgroundColor: entry.color,\n              }}\n            />\n            <div\n              style={{\n                width: 20,\n                height: 4,\n                backgroundColor: entry.color,\n                opacity: '0.4',\n              }}\n            />\n          </div>\n          <Typography\n            variant=\"body2\"\n            style={{ color: theme.palette.text.primary, fontSize: '0.875rem' }}\n          >\n            {entry.value === 'new_users' ? 'New users' : 'Returning users'}\n          </Typography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default CustomLegend;\n"],"names":["React"],"mappings":";;;;AAoBM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AACnC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA;AAEpB,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,GAAK,EAAA,EAAA;AAAA,QACL,UAAY,EAAA,QAAA;AAAA,QACZ,UAAY,EAAA,EAAA;AAAA,QACZ,UAAY,EAAA;AAAA;AACd,KAAA;AAAA,IAEC,OAAA,CAAQ,GAAI,CAAA,CAAC,KACZ,qBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAK,KAAM,CAAA,KAAA;AAAA,QACX,OAAO,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EAAU,KAAK,CAAE;AAAA,OAAA;AAAA,mDAEtD,KACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,EAAA;AAAA,YACP,MAAQ,EAAA,CAAA;AAAA,YACR,iBAAiB,KAAM,CAAA;AAAA;AACzB;AAAA,OAEF,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,EAAA;AAAA,YACP,MAAQ,EAAA,CAAA;AAAA,YACR,iBAAiB,KAAM,CAAA,KAAA;AAAA,YACvB,OAAS,EAAA;AAAA;AACX;AAAA,OAEJ,CAAA;AAAA,sBACAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,KAAA,EAAO,EAAE,KAAO,EAAA,KAAA,CAAM,QAAQ,IAAK,CAAA,OAAA,EAAS,UAAU,UAAW;AAAA,SAAA;AAAA,QAEhE,KAAA,CAAM,KAAU,KAAA,WAAA,GAAc,WAAc,GAAA;AAAA;AAC/C,KAEH;AAAA,GACH;AAEJ;;;;"}

package/dist/components/ActiveUsers/CustomTooltip.esm.js

@@ -0,0 +1,87 @@
+import React__default from 'react';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { format } from 'date-fns';
+
+const CustomTooltip = ({
+  active,
+  payload,
+  label,
+  grouping
+}) => {
+  const theme = useTheme();
+  if (active && payload?.length) {
+    const date = label ? new Date(label) : /* @__PURE__ */ new Date();
+    return /* @__PURE__ */ React__default.createElement(
+      Paper,
+      {
+        elevation: 1,
+        sx: {
+          padding: "12px 16px",
+          boxShadow: 4,
+          borderRadius: 2
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            marginBottom: "12px"
+          }
+        },
+        grouping === "hourly" ? format(date, "MMMM dd, yyyy hh:mm a") : format(date, "MMMM, dd yyyy")
+      ),
+      /* @__PURE__ */ React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Box, { mr: 3 }, /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: theme.palette.text.secondary
+          }
+        },
+        "Returning users"
+      ), /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "2.5rem",
+            fontWeight: 500,
+            color: "#009596",
+            lineHeight: 1.2
+          }
+        },
+        payload[0]?.value
+      )), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: theme.palette.text.secondary
+          }
+        },
+        "New users"
+      ), /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "2.5rem",
+            fontWeight: 500,
+            color: "#009596",
+            lineHeight: 1.2
+          }
+        },
+        payload[1]?.value
+      )))
+    );
+  }
+  return null;
+};
+
+export { CustomTooltip as default };
+//# sourceMappingURL=CustomTooltip.esm.js.map

package/dist/components/ActiveUsers/CustomTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomTooltip.esm.js","sources":["../../../src/components/ActiveUsers/CustomTooltip.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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 React from 'react';\n\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport { format } from 'date-fns';\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label,\n  grouping,\n}: {\n  active?: boolean;\n  payload?: any[];\n  label?: string;\n  grouping?: string;\n}) => {\n  const theme = useTheme();\n\n  if (active && payload?.length) {\n    const date = label ? new Date(label) : new Date();\n    return (\n      <Paper\n        elevation={1}\n        sx={{\n          padding: '12px 16px',\n          boxShadow: 4,\n          borderRadius: 2,\n        }}\n      >\n        <Typography\n          sx={{\n            fontSize: '0.875rem',\n            fontWeight: 500,\n            marginBottom: '12px',\n          }}\n        >\n          {grouping === 'hourly'\n            ? format(date, 'MMMM dd, yyyy hh:mm a')\n            : format(date, 'MMMM, dd yyyy')}\n        </Typography>\n\n        <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\n          <Box mr={3}>\n            <Typography\n              sx={{\n                fontSize: '0.875rem',\n                fontWeight: 500,\n                color: theme.palette.text.secondary,\n              }}\n            >\n              Returning users\n            </Typography>\n            <Typography\n              sx={{\n                fontSize: '2.5rem',\n                fontWeight: 500,\n                color: '#009596',\n                lineHeight: 1.2,\n              }}\n            >\n              {payload[0]?.value}\n            </Typography>\n          </Box>\n\n          <Box>\n            <Typography\n              sx={{\n                fontSize: '0.875rem',\n                fontWeight: 500,\n                color: theme.palette.text.secondary,\n              }}\n            >\n              New users\n            </Typography>\n            <Typography\n              sx={{\n                fontSize: '2.5rem',\n                fontWeight: 500,\n                color: '#009596',\n                lineHeight: 1.2,\n              }}\n            >\n              {payload[1]?.value}\n            </Typography>\n          </Box>\n        </Box>\n      </Paper>\n    );\n  }\n  return null;\n};\n\nexport default CustomTooltip;\n"],"names":["React"],"mappings":";;;;;;;AAuBA,MAAM,gBAAgB,CAAC;AAAA,EACrB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAKM,KAAA;AACJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAI,IAAA,MAAA,IAAU,SAAS,MAAQ,EAAA;AAC7B,IAAA,MAAM,OAAO,KAAQ,GAAA,IAAI,KAAK,KAAK,CAAA,uBAAQ,IAAK,EAAA;AAChD,IACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,CAAA;AAAA,QACX,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,WAAA;AAAA,UACT,SAAW,EAAA,CAAA;AAAA,UACX,YAAc,EAAA;AAAA;AAChB,OAAA;AAAA,sBAEAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,UAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,YAAc,EAAA;AAAA;AAChB,SAAA;AAAA,QAEC,QAAA,KAAa,WACV,MAAO,CAAA,IAAA,EAAM,uBAAuB,CACpC,GAAA,MAAA,CAAO,MAAM,eAAe;AAAA,OAClC;AAAA,sBAEAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,cAAA,EAAe,eAAgB,EAAA,UAAA,EAAW,QAC5D,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,UAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAC5B,SAAA;AAAA,QACD;AAAA,OAGD,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,QAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,KAAO,EAAA,SAAA;AAAA,YACP,UAAY,EAAA;AAAA;AACd,SAAA;AAAA,QAEC,OAAA,CAAQ,CAAC,CAAG,EAAA;AAAA,OAEjB,CAEA,kBAAAA,cAAA,CAAA,aAAA,CAAC,GACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,UAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAC5B,SAAA;AAAA,QACD;AAAA,OAGD,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,QAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,KAAO,EAAA,SAAA;AAAA,YACP,UAAY,EAAA;AAAA;AACd,SAAA;AAAA,QAEC,OAAA,CAAQ,CAAC,CAAG,EAAA;AAAA,OAEjB,CACF;AAAA,KACF;AAAA;AAGJ,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist/components/ActiveUsers/ExportCSVButton.esm.js

@@ -0,0 +1,75 @@
+import React__default from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import Button from '@mui/material/Button';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { format } from 'date-fns';
+import { adoptionInsightsApiRef } from '../../api/index.esm.js';
+import { useDateRange } from '../Header/DateRangeContext.esm.js';
+
+const ExportCSVButton = () => {
+  const [loading, setLoading] = React__default.useState(false);
+  const api = useApi(adoptionInsightsApiRef);
+  const { startDateRange, endDateRange } = useDateRange();
+  const theme = useTheme();
+  const debounceRef = React__default.useRef(null);
+  const handleCSVDownload = async () => {
+    try {
+      await api.downloadBlob({
+        type: "active_users",
+        start_date: startDateRange ? format(startDateRange, "yyyy-MM-dd") : void 0,
+        end_date: endDateRange ? format(endDateRange, "yyyy-MM-dd") : void 0,
+        format: "csv"
+      });
+    } catch (error) {
+      console.error("CSV Download failed:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const debouncedHandleCSVDownload = () => {
+    setLoading(true);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
+      handleCSVDownload();
+    }, 500);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      sx: {
+        height: "100%",
+        minWidth: 160,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        variant: "text",
+        startIcon: /* @__PURE__ */ React__default.createElement(FileDownloadOutlinedIcon, null),
+        onClick: debouncedHandleCSVDownload,
+        sx: {
+          color: theme.palette.primary.main,
+          textTransform: "none",
+          fontSize: "1rem",
+          fontWeight: 400,
+          textDecoration: "none",
+          "&:hover": {
+            backgroundColor: "transparent",
+            textDecoration: "none"
+          }
+        }
+      },
+      loading ? "Downloading..." : "Export CSV"
+    )
+  );
+};
+
+export { ExportCSVButton as default };
+//# sourceMappingURL=ExportCSVButton.esm.js.map

package/dist/components/ActiveUsers/ExportCSVButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportCSVButton.esm.js","sources":["../../../src/components/ActiveUsers/ExportCSVButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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 React from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport Button from '@mui/material/Button';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { format } from 'date-fns';\n\nimport { adoptionInsightsApiRef } from '../../api';\nimport { useDateRange } from '../Header/DateRangeContext';\n\nconst ExportCSVButton = () => {\n  const [loading, setLoading] = React.useState(false);\n  const api = useApi(adoptionInsightsApiRef);\n  const { startDateRange, endDateRange } = useDateRange();\n  const theme = useTheme();\n  const debounceRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  const handleCSVDownload = async () => {\n    try {\n      await api.downloadBlob({\n        type: 'active_users',\n        start_date: startDateRange\n          ? format(startDateRange, 'yyyy-MM-dd')\n          : undefined,\n        end_date: endDateRange ? format(endDateRange, 'yyyy-MM-dd') : undefined,\n        format: 'csv',\n      });\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error('CSV Download failed:', error);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const debouncedHandleCSVDownload = () => {\n    setLoading(true);\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n    }\n    debounceRef.current = setTimeout(() => {\n      handleCSVDownload();\n    }, 500);\n  };\n\n  return (\n    <Box\n      sx={{\n        height: '100%',\n        minWidth: 160,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Button\n        variant=\"text\"\n        startIcon={<FileDownloadOutlinedIcon />}\n        onClick={debouncedHandleCSVDownload}\n        sx={{\n          color: theme.palette.primary.main,\n          textTransform: 'none',\n          fontSize: '1rem',\n          fontWeight: 400,\n          textDecoration: 'none',\n          '&:hover': {\n            backgroundColor: 'transparent',\n            textDecoration: 'none',\n          },\n        }}\n      >\n        {loading ? 'Downloading...' : 'Export CSV'}\n      </Button>\n    </Box>\n  );\n};\n\nexport default ExportCSVButton;\n"],"names":["React"],"mappings":";;;;;;;;;;AA2BA,MAAM,kBAAkB,MAAM;AAC5B,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA;AAClD,EAAM,MAAA,GAAA,GAAM,OAAO,sBAAsB,CAAA;AACzC,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAa,EAAA,GAAI,YAAa,EAAA;AACtD,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,WAAA,GAAcA,cAAM,CAAA,MAAA,CAA8B,IAAI,CAAA;AAE5D,EAAA,MAAM,oBAAoB,YAAY;AACpC,IAAI,IAAA;AACF,MAAA,MAAM,IAAI,YAAa,CAAA;AAAA,QACrB,IAAM,EAAA,cAAA;AAAA,QACN,UAAY,EAAA,cAAA,GACR,MAAO,CAAA,cAAA,EAAgB,YAAY,CACnC,GAAA,KAAA,CAAA;AAAA,QACJ,QAAU,EAAA,YAAA,GAAe,MAAO,CAAA,YAAA,EAAc,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,QAC9D,MAAQ,EAAA;AAAA,OACT,CAAA;AAAA,aACM,KAAO,EAAA;AAEd,MAAQ,OAAA,CAAA,KAAA,CAAM,wBAAwB,KAAK,CAAA;AAAA,KAC3C,SAAA;AACA,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,GACF;AAEA,EAAA,MAAM,6BAA6B,MAAM;AACvC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,YAAA,CAAa,YAAY,OAAO,CAAA;AAAA;AAElC,IAAY,WAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACrC,MAAkB,iBAAA,EAAA;AAAA,OACjB,GAAG,CAAA;AAAA,GACR;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,QAAU,EAAA,GAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA;AAAA;AAClB,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,MAAA;AAAA,QACR,SAAA,+CAAY,wBAAyB,EAAA,IAAA,CAAA;AAAA,QACrC,OAAS,EAAA,0BAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,UAC7B,aAAe,EAAA,MAAA;AAAA,UACf,QAAU,EAAA,MAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,cAAgB,EAAA,MAAA;AAAA,UAChB,SAAW,EAAA;AAAA,YACT,eAAiB,EAAA,aAAA;AAAA,YACjB,cAAgB,EAAA;AAAA;AAClB;AACF,OAAA;AAAA,MAEC,UAAU,gBAAmB,GAAA;AAAA;AAChC,GACF;AAEJ;;;;"}