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