cartodb / carto-react-template Goto Github PK

...
import {FullscreenControl} from 'react-map-gl';
...
<Grid item className={`${classes.mapWrapper} ${isGmaps ? classes.gmaps : ''}`}>
        <Map layers={getLayers()} />

        <FullscreenControl style={{
          right: 10,
          top: 10
        }} />
...

└── data
    ├── models
    └── sources

// Firstly, we define the ID of the source
export const KPI_SOURCE_ID = 'kpiSource'

// Use constants for query columns aliases to
// avoid problem with future changes.
export const KPI_SOURCE_COLUMNS = {
  NAME: 'name',
  REVENUE: 'revenue'
}

// Define the source structure that will be passed to `addSource` reducer
// Remember: it's important to use aliases with the constants defined above.
export const kpiSource = {
  id: KPI_SOURCE_ID,
  data: `
  SELECT
    states.name as ${KPI_SOURCE_COLUMNS.NAME},
    SUM(stores.revenue) as ${KPI_SOURCE_COLUMNS.REVENUE},
    states.the_geom_webmercator
  FROM ne_50m_admin_1_states as states
  JOIN retail_stores as stores ON ST_Intersects(states.the_geom_webmercator, stores.the_geom_webmercator)
  GROUP BY states.name, states.the_geom_webmercator
  `,
}

// After the definition of the source, define the widgets properties
// needed to make them work. In this case, we have two widgets:
export const KPI_SOURCE_WIDGETS = {
  TOTAL_REVENUE: {
    column: KPI_SOURCE_COLUMNS.REVENUE,
    operation: AggregationTypes.SUM
  },
  REVENUE_BY_STATE: {
    column: KPI_SOURCE_COLUMNS.NAME,
    operationColumn: KPI_SOURCE_COLUMNS.REVENUE,
    operation: AggregationTypes.SUM
  }
}

npx create-react-app ui --template @carto/cra-template

$ head config-overrides.js 
/* config-overrides.js */
const path = require('path');

module.exports = function override(config, env) {
  const newConfig = config;

  newConfig.resolve.alias = {
    ...newConfig.resolve.alias,
    react: path.resolve('./node_modules/react'),
    'react-redux': path.resolve('./node_modules/react-redux'),

$ head .eslintcache
[
    {
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/index.js": "1",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/App.js": "2",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/store/store.js": "3",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/store/initialStateSlice.js": "4",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/routes.js": "5",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/store/appSlice.js": "6",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/components/common/Header.js": "7",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/components/views/login/Login.js": "8",

$ head package.dev.json 
{
  "name": "carto-for-react",
  "version": "1.0.2",
  "private": true,
  "dependencies": {
    "@carto/react-api": "1.0.1",
    "@carto/react-auth": "1.0.1",
    "@carto/react-basemaps": "1.0.1",
    "@carto/react-core": "1.0.1",
    "@carto/react-redux": "1.0.1",

Failed to compile.

./src/index.js
Error: [BABEL] /Users/victor/CODE/carto-for-react-training/setup/my-app/src/index.js: Cannot find module '@babel/helper-builder-react-jsx'
Require stack:
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx/lib/transform-classic.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/node_modules/@babel/preset-react/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/create.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/loader-runner/lib/loadLoader.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/NormalModule.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/Compiler.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/webpack.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/scripts/start.js (While processing: "/Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/index.js")

return new CartoLayer({
  ...cartoLayerProps,
  id: id,
  pickable: true,
  autoHighlight: true,
  highlightColor: (info) => {
    console.log('test')
  },
});

./node_modules/@math.gl/core/dist/esm/classes/matrix3.js
Module not found: Can't resolve 'gl-matrix/mat3' in '/Users/julien/workspace/tmp/carto-base-3/node_modules/@math.gl/core/dist/esm/classes'