@fluid-topics/ft-analytics-sessions-chart 0.0.88

package/README.md

@@ -0,0 +1,24 @@
+Display sessions
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-analytics-sessions-chart
+yarn add @fluid-topics/ft-analytics-sessions-chart
+```
+
+## Usage
+
+```typescript
+import {html} from "lit"
+import "@fluid-topics/ft-analytics-sessions-chart"
+
+function render() {
+    return html` <ft-analytics-sessions-chart 
+        baseUrl="https://my.fluidtopics.com/myTenant"
+        period="MONTH"
+        startDate="2021-01-01"
+        endDate="2022-01-01">
+    </ft-analytics-sessions-chart> `
+}
+```

package/build/ft-analytics-sessions-chart.d.ts

@@ -0,0 +1,22 @@
+import { PropertyValues } from 'lit';
+import { FtLitElement } from '@fluid-topics/ft-wc-utils';
+import { Period } from '@fluid-topics/ft-chart';
+export interface FtAnalyticsSessionsChartProperties {
+    baseUrl: string;
+    period: Period;
+    startDate: string;
+    endDate: string;
+}
+export declare class FtAnalyticsSessionsChart extends FtLitElement implements FtAnalyticsSessionsChartProperties {
+    getStyles(): import("lit").CSSResult;
+    baseUrl: string;
+    period: Period;
+    startDate: string;
+    endDate: string;
+    private data;
+    getTemplate(): import("lit-html").TemplateResult<1>;
+    protected updated(props: PropertyValues): void;
+    private fetchSessions;
+    private getData;
+}
+//# sourceMappingURL=ft-analytics-sessions-chart.d.ts.map

package/build/ft-analytics-sessions-chart.js

@@ -0,0 +1,96 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { customElement, FtLitElement } from '@fluid-topics/ft-wc-utils';
+import * as moment from 'moment';
+import { Period } from '@fluid-topics/ft-chart';
+let FtAnalyticsSessionsChart = class FtAnalyticsSessionsChart extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.baseUrl = '';
+        this.period = Period.MONTH;
+        this.startDate = moment.utc().startOf('month').add(-3, 'months').format('YYYY-MM-DD');
+        this.endDate = moment.utc().startOf('month').format('YYYY-MM-DD');
+        this.data = [];
+    }
+    getStyles() {
+        // language=CSS
+        return css `
+          .session-chart {
+            width: 100%;
+            height: 400px;
+          }
+        `;
+    }
+    getTemplate() {
+        return html `
+          <div class="session-chart">
+            <ft-chart
+                    xAxisName="date"
+                    yAxisName="sessions"
+                    valueLabels="${JSON.stringify(['sessions opened'])}"
+                    valueLabelsSingular="${JSON.stringify(['session opened'])}"
+                    barChart
+                    period="${this.period}"
+                    data="${JSON.stringify(this.data)}"
+            ></ft-chart>
+          </div>
+        `;
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has('baseUrl')) {
+            this.fetchSessions();
+        }
+    }
+    async fetchSessions() {
+        if (this.baseUrl) {
+            let response = await fetch(this.baseUrl + `/analytics/api/v2/traffic/sessions`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    endDate: this.endDate,
+                    groupByPeriod: this.period.toLowerCase(),
+                    startDate: this.startDate
+                })
+            });
+            if (response.ok) {
+                let results = (await response.json()).results;
+                this.data = this.getData(results);
+            }
+            else {
+                console.log((await response.json()).message);
+            }
+        }
+    }
+    getData(results) {
+        return results.map(dot => [moment.utc(dot.periodStartDate, 'YYYY-MM-DD').unix(), dot.sessionCount]);
+    }
+};
+__decorate([
+    property({ type: String })
+], FtAnalyticsSessionsChart.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: String })
+], FtAnalyticsSessionsChart.prototype, "period", void 0);
+__decorate([
+    property({ type: String })
+], FtAnalyticsSessionsChart.prototype, "startDate", void 0);
+__decorate([
+    property({ type: String })
+], FtAnalyticsSessionsChart.prototype, "endDate", void 0);
+__decorate([
+    state()
+], FtAnalyticsSessionsChart.prototype, "data", void 0);
+FtAnalyticsSessionsChart = __decorate([
+    customElement('ft-analytics-sessions-chart')
+], FtAnalyticsSessionsChart);
+export { FtAnalyticsSessionsChart };
+//# sourceMappingURL=ft-analytics-sessions-chart.js.map