Vue Flexmonster Pivot Table & Charts

Common errors

• Cannot find module 'flexmonster' or its corresponding type declarations.

  cause The core `flexmonster` library, a peer dependency, is not installed or TypeScript cannot find its declarations.
  fix Run `npm install flexmonster` (or `yarn add flexmonster`). For TypeScript, ensure `flexmonster` is in `node_modules` and your `tsconfig.json` includes `node_modules/@types`.

• Failed to resolve component: Pivot

  cause The `Pivot` component was imported from the wrong path (e.g., using `vue-flexmonster` for a Vue 3 project, or vice versa) or not registered correctly.
  fix Verify the import path: `import { Pivot } from 'vue-flexmonster/vue3';` for Vue 3, and `import { Pivot } from 'vue-flexmonster';` for Vue 2. Ensure the component is used in your template as `<Pivot />`.

• Property 'flexmonster' does not exist on type 'InstanceType<typeof Pivot>' or 'this.$refs.pivot'.

  cause Attempting to access the underlying Flexmonster API instance without proper typing or ensuring the component reference is available and the instance has initialized.
  fix In Vue 3, use `ref<InstanceType<typeof Pivot> | null>(null)` and check `flexmonsterRef.value?.flexmonster`. In Vue 2, use `this.$refs.pivot?.flexmonster` and ensure `this.$refs.pivot` is properly defined on the component.

• TypeError: Cannot read properties of undefined (reading 'flexmonster') when trying to call API methods.

  cause The Flexmonster instance (`flexmonsterRef.value.flexmonster` or `this.$refs.pivot.flexmonster`) is not yet ready or the `ready` event has not fired when an API call is attempted.
  fix Always interact with the Flexmonster API methods only after the `ready` event has been emitted by the `<Pivot>` component, which guarantees the instance is fully initialized. Use the `@ready` event handler to safely access the API.

Warnings

• breaking Major version updates of the core `flexmonster` library (e.g., Flexmonster 3.0) introduce significant architectural changes and breaking changes. As `vue-flexmonster` is a wrapper, it will track these changes, requiring updates to your application code and configuration.
  Fix: Consult the official `flexmonster` and `vue-flexmonster` migration guides for each major version upgrade to identify and implement necessary code adjustments.
• gotcha Vue 2 and Vue 3 projects require different import paths for the `Pivot` component. Using the incorrect path will result in a 'Failed to resolve component' error.
  Fix: For Vue 3, use `import { Pivot } from 'vue-flexmonster/vue3';`. For Vue 2, use `import { Pivot } from 'vue-flexmonster';`.
• gotcha The `flexmonster` core library is a peer dependency and must be installed alongside `vue-flexmonster`. Without it, the component cannot initialize and will throw errors related to missing modules.
  Fix: Ensure `npm install flexmonster` or `yarn add flexmonster` is run in your project, maintaining a version compatible with your `vue-flexmonster` installation (as specified in peerDependencies).
• gotcha The Flexmonster CSS (`flexmonster/flexmonster.css`) is not automatically included and must be explicitly imported into your application. Without it, the pivot table will render unstyled.
  Fix: Add `import 'flexmonster/flexmonster.css';` to your main application entry point or the component where `Pivot` is used.
• gotcha For TypeScript projects, if you encounter 'Cannot find module 'vue-flexmonster/vue3' (or 'vue-flexmonster') errors, you likely need to declare the module in your environment typings.
  Fix: Add `declare module 'vue-flexmonster/vue3'` (for Vue 3) or `declare module 'vue-flexmonster'` (for Vue 2) to your `env.d.ts` or `shims-vue.d.ts` file.

Install

• npm install vue-flexmonster npm
• yarn add vue-flexmonster yarn
• pnpm add vue-flexmonster pnpm

Imports

• Pivot
  wrong:

  import Pivot from 'vue-flexmonster'; // For Vue 3, this path is incorrect

  correct:

  import { Pivot } from 'vue-flexmonster/vue3';

  For Vue 3 projects, import the component specifically from `vue-flexmonster/vue3`. Vue 2 projects should use `import Pivot from 'vue-flexmonster';`. There is no default export for the component.
• Flexmonster CSS
  wrong:

  /* CSS omitted */

  correct:

  import 'flexmonster/flexmonster.css';

  The core Flexmonster CSS must be explicitly imported for the pivot table to render correctly with its styling. This is a common oversight.
• Flexmonster global types

  /// <reference types="flexmonster" />

  While `flexmonster` is a peer dependency, its global types (e.g., `Flexmonster.Report`, `Flexmonster.CellBuilder`) are often consumed directly by TypeScript. Ensure the `flexmonster` package is installed to provide these types. For Vue 3 with TypeScript, you may also need `declare module 'vue-flexmonster/vue3'` in your `env.d.ts` or `shims-vue.d.ts`.

Quickstart

Demonstrates how to embed the Flexmonster Pivot component in a Vue 3 application using the Composition API. It initializes with inline JSON data, defines a basic slice, customizes cell styling based on data values, and shows how to access the underlying Flexmonster API.

<script setup lang="ts">
import { ref } from 'vue';
import { Pivot } from 'vue-flexmonster/vue3';
import 'flexmonster/flexmonster.css'; // Essential for styling

interface SalesData {
  Category: string;
  Price: number;
  Quantity: number;
}

const report = ref<Flexmonster.Report> ({
  dataSource: {
    data: [
      { Category: "Accessories", Price: 100, Quantity: 10 },
      { Category: "Bikes", Price: 200, Quantity: 5 },
      { Category: "Components", Price: 50, Quantity: 20 },
      { Category: "Accessories", Price: 120, Quantity: 8 },
      { Category: "Bikes", Price: 250, Quantity: 3 }
    ] as SalesData[]
  },
  slice: {
    rows: [{ uniqueName: "Category" }],
    columns: [{ uniqueName: "[Measures]" }],
    measures: [
      { uniqueName: "Price", aggregation: "sum" },
      { uniqueName: "Quantity", aggregation: "sum" }
    ]
  }
});

const flexmonsterRef = ref<InstanceType<typeof Pivot> | null>(null);

// Example: Customize cell appearance based on data
const customizeCell = (cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) => {
  if (data.isGrandTotalRow && data.measure && data.measure.uniqueName === "Price.sum" && data.value && +data.value > 1000) {
    cell.addClass("high-total-cell");
  }
};

// Example: Access the Flexmonster API after the component is ready
const onReady = () => {
  if (flexmonsterRef.value && flexmonsterRef.value.flexmonster) {
    console.log("Flexmonster instance is ready:", flexmonsterRef.value.flexmonster);
    // You can now interact with the Flexmonster API, e.g., to update data
    // flexmonsterRef.value.flexmonster.updateData({ data: [{ Category: 'Electronics', Price: 300, Quantity: 2 }] });
  }
};
</script>

<template>
  <div class="flexmonster-container">
    <h1>Product Sales Overview</h1>
    <Pivot
      ref="flexmonsterRef"
      :report="report"
      :customizeCellFunction="customizeCell"
      :licenseKey="process.env.VUE_APP_FLEXMONSTER_LICENSE ?? ''" <!-- Use environment variable for license -->
      @ready="onReady"
    />
  </div>
</template>

<style>
.flexmonster-container {
  font-family: Arial, sans-serif;
  padding: 20px;
}
.high-total-cell {
  background-color: #ffe0e0 !important;
  font-weight: bold;
  color: #c00;
}
/* Basic Flexmonster theme adjustments (optional) */
.fm-ui-element {
  font-size: 14px;
}
</style>