Install react-flexmonster correctly css file not listed in node_modules package file

Hi Solomia,

Thanks for getting back to me.

Let me do a new installation in a poco new project. Following your step.

Hi Solomia,

I laready download the github pivot-react repo.

I laready ran it on my local and install the /typescript project dependencies.

Everything is running fine on my local with the example.

This example is using .json connection type. So, I want to use my own connection.

What I did is declare the event onReady and set the connection object but its does not works. I do not see anything loading and no error is showing. I may missing some value in the configuration.

Here is some screenshot and info about the diff ways i trying to fix my issue. SOrryabout the comments code, but I just want you te see where I missing.

import { useEffect, useRef, useState } from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';
import * as FlexmonsterReact from 'react-flexmonster';

function Pivote() {
  const pivotRef: React.RefObject<FlexmonsterReact.Pivot | null> =
    useRef<FlexmonsterReact.Pivot>(null);
  const [isPivotConfigLoading, setIsPivotConfigLoading] = useState(false);
  const [pivotDataSourceInfo, setPivotDataSourceInfo] = useState<string>('');
  const [pivotDataSourceType, setPivotDataSourceType] = useState<string>('');
  const [pivotDataSourceCatalog, setPivotDataSourceCatalog] =
    useState<string>('');
  const [pivotDataSourceCube, setPivotDataSourceCube] = useState<string>('');

  const fetchDataSourceInfo = async () => {
    if (pivotRef && pivotRef.current) {
      setIsPivotConfigLoading(true);
      const flexmonsterIntance = pivotRef.current.flexmonster;
      const dataSourcesInfo: string[] =
        await flexmonsterIntance.getXMLADataSourcesAsync(proxyURL);
      const dataSourceType: string =
        await flexmonsterIntance.getXMLAProviderNameAsync(proxyURL);
      const catalogs: string[] = await flexmonsterIntance.getXMLACatalogsAsync(
        proxyURL,
        dataSourcesInfo[0]
      );
      const cubes: string[] = await flexmonsterIntance.getXMLACubesAsync(
        proxyURL,
        dataSourcesInfo[0],
        catalogs[0]
      );

      if (
        dataSourcesInfo.length > 0 &&
        dataSourceType &&
        catalogs.length > 0 &&
        cubes.length > 0
      ) {
        const pivotCNX = {
          type: 'microsoft analysis services',
          proxyURL: '[our olap xmla url.../xmla]',
          dataSourceInfo: dataSourcesInfo[0],
          catalog: catalogs[0],
          cube: cubes[3],
        };
        flexmonsterIntance.connectTo(pivotCNX);
        // setPivotDataSourceInfo(dataSourcesInfo[0]);
        // setPivotDataSourceType(dataSourceType);
        // setPivotDataSourceCatalog(catalogs[0]);
        // setPivotDataSourceCube(cubes[3]);
        // console.log('dataSourceInfo', dataSourcesInfo);
        // console.log('dataSourceType', dataSourceType);
        // console.log('catalog', catalogs);
        // console.log('cube', cubes);
        setIsPivotConfigLoading(false);
      }
    }
  };

  // useEffect(() => {
  //   fetchDataSourceInfo();
  // }, []);
  const connectPivotHandler = () => {
    fetchDataSourceInfo();
  };

  const pivotReadyHandler = () => {
    if (pivotRef && pivotRef.current) {
      setIsPivotConfigLoading(true);
      const flexmonsterIntance = pivotRef.current.flexmonster;
      const pivotCNX = {
        type: 'microsoft analysis services',
        proxyURL: '[our olap xmla url.../xmla]',
        dataSourceInfo: 'Transparency Portal',
        catalog: 'OLAP_KOSOVO_DWH',
        cube: 'COA2022_004',
      };
      flexmonsterIntance.connectTo(pivotCNX);
      // setPivotDataSourceInfo(dataSourcesInfo[0]);
      // setPivotDataSourceType(dataSourceType);
      // setPivotDataSourceCatalog(catalogs[0]);
      // setPivotDataSourceCube(cubes[3]);
      // console.log('dataSourceInfo', dataSourcesInfo);
      // console.log('dataSourceType', dataSourceType);
      // console.log('catalog', catalogs);
      // console.log('cube', cubes);
      setIsPivotConfigLoading(false);
    }
  };

  return (
    <div id="pivot-table">
      {isPivotConfigLoading && (
        <>
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'center',
              marginBottom: '10px',
            }}
          >
            <CircularProgress />
          </Box>
          <Stack
            sx={{
              width: '100%',
              color: 'grey.500',
            }}
            spacing={2}
          >
            <LinearProgress color="secondary" />
          </Stack>
        </>
      )}
      <Button variant="text" onClick={connectPivotHandler}>
        CONNECT
      </Button>
      {/* <FlexmonsterReact.Pivot
        ref={pivotRef}
        toolbar={true}
        ready={pivotReadyHandler}
      /> */}
      <FlexmonsterReact.Pivot
        ref={pivotRef}
        toolbar={true}
        report={{
          dataSource: {
            type: 'json',
            data: [
              { Category: 'Beverages', Sales: 100 },
              { Category: 'Snacks', Sales: 150 },
            ],
          },
        }}
      />
    </div>
  );
}

NOTE
If you connect using the connect dialog from table its works properly. But if you set the connect via the connectTo method or via the dataSourceObject, setting those at the beginning is does not works.

For XMLA datasource type, the documentation require to use this approach config

pivot.connectTo({
  type: 'microsoft analysis services',
  proxyUrl: 'https://olap.flexmonster.com/olap/msmdpump.dll',
  dataSourceInfo: 'Provider=MSOLAP; Data Source=extranet;',
  catalog: 'Adventure Works DW Standard Edition',
  cube: 'Adventure Works'
});

In our case, folling the documentation should be

 const pivotCNX = {
          type: 'microsoft analysis services',
          proxyURL: '[our olap xmla url.../xmla]',
          dataSourceInfo: dataSourcesInfo[0],
          catalog: catalogs[0],
          cube: cubes[3],
       };

 
But this does not work.
 
By the otherhand, if I try to connect using the connect modal called from the pivot table toolbar using my custom url its work fine
 


 
I'll appreciate your help,
If we can have a video call in order to solve this. It'll be perfect. Because I need to build this POC for flexmonster, if not I'll have to search for other tools.
Regards
 

Hi Solomiia,
Thanks for heading back.

I was going to send answer to you.

Yes, I reach to connect to the OLAP cube VIA XMLA.

In this moment I need to know how access to the JSON created when you click the Save button from the toolbar. The idea is to save this JSON file and then let the users switch between reports.

I already check that the react component expose subscription of the events. But what I need is to acces to report json generated when the Save button is clicked

Can you please share an example of it, using react component?

Or a link where I can read the API doc about it.

I appreciate your help
Regards

Hi Solomiia,
Thanks for your answer.

What we need essentially, is to know if you have any available options to access the report .json file generated from clicking the Toolbar "Save" button.

I do not now if this can happen from customizing the toolbar Save tab button or from any available events subscription you have exposed in the react component ref lib. In fact, in the list of available subscribed event you have exposed from the react component ref, we do not see any event that we can use to access to this .json report file.

Please let me know which should be the best approache to handle this necessity we have.

I'll be waiting on your support
Regards

Hi Solomiia,
Thanks for your support.

Currently, I using those methods get..() and set..() in our POC. But this get..() method is usefull when you want to access to the report .json() in any async moment.

But this is not what wee need, and let me explain it to you.
We need to access the report .json file in order to save it in our logic. But, wee need to access to this json when the Toolbar Save button is clicked and the json is ready to save, in this moment is where wee need to access to this report .json file. And if its possible, redefine the Toolbar Save button behavior, so insted of opening a file save dialog we can fetch a API call to save this .json() file.

Can you please double check with the dev team, to see which options are available for this.

I'll be waiting on your contact,
Regards

Hi Solomiia,
I hope you had good weekend.

Thanks for your answer. An yes, this is what we needs. How is possible I missed that part of the doc.

Let me test and ceck all what you're sharing and I'll comeback to you.

Thanks for your time,
Regards