@projectcaluma/ember-analytics 1.0.0-beta.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @projectcaluma/ember-analytics-v1.0.0-beta.1 (2022-08-02)
+
+
+### chore
+
+* **deps:** update dependencies and drop support for node 10 ([51d6dee](https://github.com/projectcaluma/ember-caluma/commit/51d6deeda9811518622ba0cefd8d3876651dab4f))
+
+
+### Features
+
+* **analytics:** adds analytics module for caluma ([#1655](https://github.com/projectcaluma/ember-caluma/issues/1655)) ([9573abe](https://github.com/projectcaluma/ember-caluma/commit/9573abe95cd39cb1467113026f2ab7773c3c9143))
+
+
+### BREAKING CHANGES
+
+* **deps:** Remove support for node v10

package/addon/components/ca-field-form.hbs

@@ -0,0 +1,82 @@
+{{#if this.showForm}}
+  <ValidatedForm @model={{this.field}} @on-submit={{this.submitField}} as |f|>
+    <div
+      data-test-add-field-form
+      class="uk-flex uk-flex-between uk-flex-middle"
+    >
+      <h3>{{t "caluma.analytics.edit.add-field"}}</h3>
+      <div class="uk-flex uk-flex-middle">
+        <div class="uk-margin-right uk-flex uk-flex-middle">
+          <f.input
+            @name="showOutput"
+            @label={{t "caluma.analytics.edit.show-in-output"}}
+            @required={{true}}
+            @renderComponent={{component
+              (ensure-safe-component "ca-toggle-switch")
+              value=f.model.showOutput
+              size="small"
+              onToggle=(mut f.model.showOutput)
+            }}
+          />
+        </div>
+      </div>
+    </div>
+
+    <f.input
+      @type="select"
+      @name="dataSource"
+      @label={{t "caluma.analytics.edit.field"}}
+    >
+      <div class="uk-grid-small uk-child-width-1-5" uk-grid>
+        <CaFieldSelect
+          @onSelect={{this.setFieldPath}}
+          @selectedPath={{this.field.dataSource}}
+          @slug={{@analyticsTable.slug}}
+        />
+      </div>
+    </f.input>
+    {{#if this.showAggregationSelect}}
+      <f.input
+        @name="aggregateFunction"
+        @type="select"
+        @label={{t "caluma.analytics.edit.aggregation"}}
+        @options={{this.supportedFunctions}}
+        class="uk-width-small"
+      />
+    {{/if}}
+    <f.input
+      @name="alias"
+      @type="text"
+      @label={{t "caluma.analytics.edit.display-title"}}
+      @placeholder={{t "caluma.analytics.edit.display-title-placeholder"}}
+    />
+    <div class="uk-flex uk-flex-right">
+      <f.button
+        data-test-form-cancel
+        class="uk-margin-small-right"
+        @disabled={{this.saveField.isRunning}}
+        {{on "click" this.toggleForm}}
+      >
+        {{t "caluma.analytics.cancel"}}
+      </f.button>
+
+      <f.submit
+        data-test-form-submit
+        @loading={{this.saveField.isRunning}}
+        @disabled={{or this.saveField.isRunning (not this.isValueField)}}
+      >
+        {{t "caluma.analytics.edit.add-field"}}
+      </f.submit>
+    </div>
+  </ValidatedForm>
+{{else}}
+  <div class="uk-flex uk-flex-right">
+    <UkButton
+      @color="primary"
+      data-test-add-field-button
+      {{on "click" this.toggleForm}}
+    >
+      {{t "caluma.analytics.edit.add-field"}}
+    </UkButton>
+  </div>
+{{/if}}

package/addon/components/ca-field-form.js

@@ -0,0 +1,100 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { queryManager } from "ember-apollo-client";
+import { Changeset } from "ember-changeset";
+import lookupValidator from "ember-changeset-validations";
+import { enqueueTask } from "ember-concurrency";
+
+import saveAnalyticsField from "@projectcaluma/ember-analytics/tasks/save-analytics-field";
+import FieldValidations from "@projectcaluma/ember-analytics/validations/field";
+
+class Field {
+  @tracked alias;
+  @tracked dataSource;
+  @tracked aggregateFunction = "VALUE";
+  @tracked showOutput = true;
+}
+
+export default class CaFieldFormComponent extends Component {
+  @queryManager apollo;
+  @service notification;
+  @service intl;
+
+  @tracked supportedFunctions = [];
+  @tracked isValueField = false;
+  @tracked showForm = false;
+
+  @enqueueTask saveField = saveAnalyticsField;
+
+  constructor(...args) {
+    super(...args);
+    this.field = Changeset(
+      new Field(),
+      lookupValidator(FieldValidations),
+      FieldValidations
+    );
+  }
+
+  get tableId() {
+    return this.args.analyticsTable?.id;
+  }
+
+  get analyticsFields() {
+    return this.args.analyticsTable?.fields.edges.map((edge) => edge.node);
+  }
+
+  get tableSlug() {
+    return this.args.analyticsTable?.slug;
+  }
+
+  get showAggregationSelect() {
+    return this.field.dataSource && this.supportedFunctions.length;
+  }
+
+  @action
+  toggleForm() {
+    this.showForm = !this.showForm;
+    this.field.rollback();
+  }
+
+  @action
+  setFieldPath(field) {
+    this.field.dataSource = field.sourcePath;
+    this.field.alias = field.label;
+    this.supportedFunctions = field.supportedFunctions;
+    this.isValueField = field.isValue;
+  }
+
+  @action
+  async submitField() {
+    this.field.validate();
+
+    if (this.field.isInvalid) {
+      this.notification.danger(
+        this.intl.t(`caluma.analytics.notification.field-invalid`)
+      );
+    } else if (
+      this.analyticsFields.find(
+        (existing) => existing.alias === this.field.get("alias")
+      )
+    ) {
+      this.notification.danger(
+        this.intl.t(`caluma.analytics.notification.alias-exists`)
+      );
+    } else {
+      const { id, alias, dataSource, aggregateFunction, showOutput } =
+        this.field.pendingData;
+      await this.saveField.perform({
+        table: this.tableId,
+        id,
+        alias,
+        dataSource,
+        showOutput,
+        function: aggregateFunction,
+      });
+      this.toggleForm();
+    }
+  }
+}

package/addon/components/ca-field-select.hbs

@@ -0,0 +1,30 @@
+{{#if @child}}
+  <span
+    data-test-field-select-seperator
+    uk-icon="icon: triangle-right; ratio: 1.5"
+    class="uk-width-auto uk-text-center uk-margin-auto-vertical"
+  ></span>
+{{/if}}
+<div ...attributes data-test-field-select-primary-selector={{not @child}}>
+  <PowerSelect
+    class={{this.selectedOption.value}}
+    @options={{this.options}}
+    @selected={{this.selectedOption}}
+    @onChange={{this.update}}
+    @triggerId={{this.fieldPath}}
+    @onOpen={{this.fetchOptions.perform}}
+    as |option|
+  >
+    {{option.label}}
+  </PowerSelect>
+</div>
+{{#if this.isBranch}}
+  <CaFieldSelect
+    data-test-field-select-secondary-selector
+    @child={{true}}
+    @onSelect={{@onSelect}}
+    @parentPath={{this.fieldPath}}
+    @selectedPath={{@selectedPath}}
+    @slug={{@slug}}
+  />
+{{/if}}

package/addon/components/ca-field-select.js

@@ -0,0 +1,111 @@
+import { assert } from "@ember/debug";
+import { action, set } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { queryManager } from "ember-apollo-client";
+import { restartableTask } from "ember-concurrency";
+
+import getAvailableFieldsForFieldQuery from "@projectcaluma/ember-analytics/gql/queries/get-available-fields-for-field.graphql";
+
+export default class CaFieldSelectComponent extends Component {
+  @queryManager apollo;
+  @service notification;
+  @service intl;
+
+  @tracked _selectedOption;
+  @tracked options;
+
+  get selectedOption() {
+    if (!this.currentPathSegment) {
+      return {};
+    }
+    return { ...this._selectedOption, ...{ value: this.currentPathSegment } };
+  }
+
+  get currentPathSegment() {
+    if (!this.args.selectedPath) return "";
+    const remainingFromParentPath = this.args.parentPath
+      ? this.args.selectedPath.substring(this.args.parentPath.length + 1)
+      : this.args.selectedPath;
+    return this.firstSegment(remainingFromParentPath);
+  }
+
+  get hasRemainingPath() {
+    if (!this.args.selectedPath) return false;
+    const remainingFromParentPath = this.args.parentPath
+      ? this.args.selectedPath.substring(this.args.parentPath.length + 1)
+      : this.args.selectedPath;
+    return remainingFromParentPath.length > this.currentPathSegment.length + 1;
+  }
+
+  get fieldPath() {
+    if (!this.currentPathSegment) return "";
+    return (
+      (this.args.parentPath ? `${this.args.parentPath}.` : "") +
+      this.currentPathSegment
+    );
+  }
+
+  get isBranch() {
+    if (
+      (this.isRoot && this.fetchedFor === "_root_") ||
+      this.fetchedFor === this.args.parentPath
+    ) {
+      return this._selectedOption ? !this._selectedOption.isLeaf : false;
+    }
+    return this.hasRemainingPath;
+  }
+
+  get isRoot() {
+    return !this.args.parentPath;
+  }
+
+  @action
+  update(value) {
+    assert(
+      "A listener for updates on CaFieldSelectComponent has to be set.",
+      this.args.onSelect
+    );
+    set(this, "_selectedOption", value);
+    this.args.onSelect(this._selectedOption);
+  }
+
+  @restartableTask
+  *fetchOptions() {
+    try {
+      if (
+        !this.fetchedFor ||
+        (!this.isRoot && this.fetchedFor !== this.args.parentPath)
+      ) {
+        const options = yield this.apollo.query(
+          {
+            query: getAvailableFieldsForFieldQuery,
+            fetchPolicy: "no-cache",
+            variables: {
+              slug: this.args.slug,
+              prefix: this.args.parentPath ?? "",
+            },
+          },
+          "analyticsTable.availableFields"
+        );
+        this.fetchedFor = this.isRoot ? "_root_" : this.args.parentPath;
+        this.options = options.edges.map((edge) => edge.node);
+      }
+    } catch (error) {
+      console.error(error);
+      this.notification.danger(
+        this.intl.t("caluma.analytics.notification.fetch-error")
+      );
+    }
+  }
+
+  firstSegment(path) {
+    if (!path) return "";
+    if (path.indexOf(".") === -1) {
+      return path;
+    }
+    const delimiterIndex = path.indexOf(".");
+    return path.substring(0, delimiterIndex);
+  }
+}

package/addon/components/ca-field-selector-list/ca-field-alias-input.hbs

@@ -0,0 +1,21 @@
+<div class="uk-inline">
+  <button
+    data-test-delete-field
+    type="button"
+    class="uk-form-icon uk-form-icon-flip"
+    uk-icon="check"
+    hidden={{not this.hasChanged}}
+    name={{t "caluma.analytics.edit.delete-field"}}
+    {{on "click" this.trimAndSave}}
+  >
+    <span hidden>{{t "caluma.analytics.edit.delete-field"}}</span>
+  </button>
+
+  <input
+    data-test-field-alias-input
+    aria-label={{t "caluma.analytics.edit.display-title"}}
+    class="uk-input {{if this.hasChanged 'uk-form-success'}}"
+    value={{this.value}}
+    {{on "input" (perform this.debounceInput)}}
+  />
+</div>

package/addon/components/ca-field-selector-list/ca-field-alias-input.js

@@ -0,0 +1,28 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { restartableTask, timeout } from "ember-concurrency";
+
+export default class CaFieldSelectorListCaFieldAliasInputComponent extends Component {
+  @tracked _value = null;
+
+  get value() {
+    return this._value ?? this.args.value;
+  }
+
+  get hasChanged() {
+    return this._value !== null && this._value !== this.args.value;
+  }
+
+  @action
+  async trimAndSave() {
+    await this.args.onSave(this._value);
+    this._value = null;
+  }
+
+  @restartableTask
+  *debounceInput(event) {
+    yield timeout(200);
+    this._value = event.target.value;
+  }
+}

package/addon/components/ca-field-selector-list/ca-field-function-select.hbs

@@ -0,0 +1,8 @@
+<PowerSelect
+  @onChange={{fn @update "function"}}
+  @options={{this.aggregationFunctions.value}}
+  @selected={{@field.function}}
+  as |function|
+>
+  {{function}}
+</PowerSelect>

package/addon/components/ca-field-selector-list/ca-field-function-select.js

@@ -0,0 +1,49 @@
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { queryManager } from "ember-apollo-client";
+import { task } from "ember-concurrency";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
+
+import getAvailableFieldsForFieldQuery from "@projectcaluma/ember-analytics/gql/queries/get-available-fields-for-field.graphql";
+
+export default class CaFieldSelectorListCaFieldFunctionSelectComponent extends Component {
+  @queryManager apollo;
+  @service notification;
+  @service intl;
+
+  @tracked aggregationFunctions = trackedTask(
+    this,
+    this.getAggregationFunctions,
+    () => [this.args.field, this.args.tableSlug]
+  );
+
+  @task
+  *getAggregationFunctions() {
+    try {
+      // Get the base path without the field so we can fetch the necessary fields later on.
+      const pathList = this.args.field.dataSource.split(".");
+      const prefix = pathList.slice(0, -1).join(".");
+      const options = yield this.apollo.query(
+        {
+          query: getAvailableFieldsForFieldQuery,
+          variables: {
+            slug: this.args.tableSlug,
+            prefix,
+          },
+        },
+        "analyticsTable.availableFields"
+      );
+      const fields = options.edges.map((edge) => edge.node);
+      const field = fields.find(
+        (field) => field.sourcePath === this.args.field.dataSource
+      );
+      return field?.supportedFunctions ?? [];
+    } catch (error) {
+      console.error(error);
+      this.notification.danger(
+        this.intl.t("caluma.analytics.notification.fetch-error")
+      );
+    }
+  }
+}

package/addon/components/ca-field-selector-list.hbs

@@ -0,0 +1,82 @@
+<table class="uk-table uk-table-divider uk-table-hover" uk-overflow-auto>
+  <thead>
+    <tr>
+      <th>{{t "caluma.analytics.edit.question"}}</th>
+      <th>{{t "caluma.analytics.edit.display-title"}}</th>
+      <th>{{t "caluma.analytics.edit.aggregation"}}</th>
+      <th class="uk-text-center">{{t
+          "caluma.analytics.edit.show-in-output"
+        }}</th>
+      <th>{{t "caluma.analytics.edit.filter"}}</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each this.fields as |field|}}
+      {{#let (fn this.updateField field) as |update|}}
+        <tr>
+          <td>
+            {{field.dataSource}}
+          </td>
+          <td>
+            <CaFieldSelectorList::CaFieldAliasInput
+              @value={{field.alias}}
+              @onSave={{fn update "alias"}}
+            />
+          </td>
+          <td>
+            <CaFieldSelectorList::CaFieldFunctionSelect
+              @field={{field}}
+              @tableSlug={{@analyticsTable.slug}}
+              @update={{update}}
+            />
+          </td>
+          <td class="uk-flex uk-flex-center uk-flex-middle">
+            <UkToggleSwitch
+              @value={{field.showOutput}}
+              @size="small"
+              @onToggle={{fn update "showOutput"}}
+            />
+          </td>
+          <td>
+            <CaFilterModal
+              @table={{@analyticsTable.id}}
+              @field={{field}}
+              as |TriggerButton|
+            >
+              <TriggerButton
+                @label={{if
+                  field.filters.length
+                  (t
+                    "caluma.analytics.edit.edit-filters"
+                    num=field.filters.length
+                  )
+                  (t "caluma.analytics.edit.add-filters")
+                }}
+              />
+            </CaFilterModal>
+          </td>
+          <td>
+            <button
+              data-test-delete-field
+              type="button"
+              class="uk-icon-button"
+              uk-icon="trash"
+              name={{t "caluma.analytics.edit.delete-field"}}
+              {{on "click" (perform this.removeAnalyticsField field.id)}}
+            >
+              <span hidden>{{t "caluma.analytics.edit.delete-field"}}</span>
+            </button>
+          </td>
+        </tr>
+      {{/let}}
+    {{else}}
+      <td colspan="5">
+        <h3 class="uk-flex uk-flex-center uk-flex-middle">
+          <UkIcon @icon="search" @ratio="1.5" class="uk-margin-small-right" />
+          {{t "caluma.analytics.edit.empty"}}
+        </h3>
+      </td>
+    {{/each}}
+  </tbody>
+</table>

package/addon/components/ca-field-selector-list.js

@@ -0,0 +1,54 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { queryManager, getObservable } from "ember-apollo-client";
+import { enqueueTask } from "ember-concurrency";
+
+import removeAnalyticsFieldMutation from "@projectcaluma/ember-analytics/gql/mutations/remove-analytics-field.graphql";
+import saveAnalyticsField from "@projectcaluma/ember-analytics/tasks/save-analytics-field";
+
+export default class CaFieldSelectorListComponent extends Component {
+  @queryManager apollo;
+  @service notification;
+  @service intl;
+
+  @enqueueTask saveField = saveAnalyticsField;
+
+  get fields() {
+    return (
+      this.args.analyticsTable?.fields?.edges?.map((edge) => edge.node) ?? []
+    );
+  }
+
+  @action
+  async updateField(field, key, value) {
+    const requiredInput = {
+      id: field.id,
+      alias: field.alias,
+      dataSource: field.dataSource,
+      function: field.function,
+      table: this.args.analyticsTable.id,
+    };
+    await this.saveField.perform({
+      ...requiredInput,
+      [key]: value,
+    });
+  }
+
+  @enqueueTask
+  *removeAnalyticsField(id) {
+    try {
+      yield this.apollo.mutate({
+        mutation: removeAnalyticsFieldMutation,
+        variables: { input: { id } },
+      });
+      const observableQuery = getObservable(this.args.analyticsTable);
+      yield observableQuery.refetch();
+    } catch (error) {
+      console.error(error);
+      this.notification.danger(
+        this.intl.t("caluma.analytics.notification.delete-error")
+      );
+    }
+  }
+}

package/addon/components/ca-filter-modal.hbs

@@ -0,0 +1,77 @@
+<UkModal
+  @visible={{this.visible}}
+  @onHide={{fn (mut this.visible) false}}
+  as |modal|
+>
+  <modal.header>
+    <h2 class="uk-modal-title">{{t
+        "caluma.analytics.filter-modal.filters"
+      }}</h2>
+  </modal.header>
+  <modal.body>
+
+    <div class="uk-flex">
+      <input
+        class="uk-input"
+        type="text"
+        placeholder={{t "caluma.analytics.filter-modal.filter-placeholder"}}
+        value={{this.newFilter}}
+        aria-label={{t "caluma.analytics.filter-modal.filter-placeholder"}}
+        {{on "input" this.updateNewFilter}}
+      />
+
+      <UkButton
+        @color="primary"
+        @disabled={{not this.newFilter}}
+        class="uk-flex uk-flex-middle"
+        {{on "click" this.addFilter}}
+      >
+        <UkIcon @icon="plus" @ratio="1.5" />
+      </UkButton>
+    </div>
+
+    <UkList
+      @divider="true"
+      class="uk-padding-small uk-padding-remove-left"
+      uk-overflow-auto
+      as |List|
+    >
+      {{#each this.filters as |filter|}}
+        <List.item class="uk-flex uk-flex-between uk-flex-middle">
+          <span>{{filter}}</span>
+          <button
+            type="button"
+            class="uk-icon-button"
+            uk-icon="trash"
+            name={{t "caluma.analytics.filter-modal.delete-filter"}}
+            {{on "click" (fn this.removeFilter filter)}}
+          >
+            <span hidden>{{t
+                "caluma.analytics.filter-modal.delete-filter"
+              }}</span>
+          </button>
+        </List.item>
+      {{else}}
+        <List.item>{{t "caluma.analytics.filter-modal.empty"}}</List.item>
+      {{/each}}
+      <List.item />
+    </UkList>
+  </modal.body>
+  <modal.footer class="uk-flex uk-flex-between">
+    <UkButton
+      @label={{t "caluma.analytics.cancel"}}
+      @onClick={{fn (mut this.visible) false}}
+    />
+    <UkButton
+      @color="primary"
+      @onClick={{perform this.saveField this.graphqlInput}}
+      @loading={{this.saveField.isRunning}}
+      @label={{t "caluma.analytics.save"}}
+    />
+  </modal.footer>
+</UkModal>
+{{yield
+  (component
+    (ensure-safe-component "uk-button") onClick=(fn (mut this.visible) true)
+  )
+}}