[]>\n}\n```\n\n\n#### Example\n\n```jsx\nconst dataLoaders = [{\n query: 'queryName',\n source: 'dataSourceName',\n loader: async () => {\n return [\n {\n id: 1,\n name: 'Eiffel Tower',\n country: 'France',\n longitude: 48.85845461500544,\n latitude: 2.294467845588995\n },\n {\n id: 2,\n name: 'Liberty Statue',\n country: 'USA',\n longitude: 40.68815550804761,\n latitude: -74.02620077137483\n },\n {\n id: 3,\n name: 'Great Wall of China',\n country: 'China',\n longitude: 40.43211592595951,\n latitude: 116.57040708445938,\n }\n ]\n }\n}]\n...\n\n \n```\n\n### Initial Row\nThe initial row prop centers the visualization around a specific row (e.g. asset, facility).\n\n```typescript\ntype InitialRow = {\n layerId: string\n rowId: string\n}\n```\n\n### Filter\nWhen adding a filter, the field name is handled as a dimension in Hopara.\n\n```jsx\nHopara.init({\n visualizationId: 'my-hopara-viz',\n accessToken: 'my-hopara-token',\n targetElementId: 'my-target-element',\n filters: [\n {\n field: 'type',\n values: ['REFRIGERATOR', 'FREEZER'],\n }\n ],\n})\n```\n\n### Callback Function\nYou can implement custom interactions by adding callback actions to a layer. When the user selects an object in the visualization and click on the action the registered javascript function will be called with the associated row data. \n\n```typescript\ntype CallbackFunction = {\n name: string\n callback: (row) => void\n}\n```\n\n```jsx\nHopara.init({\n visualizationId: 'my-hopara-viz',\n accessToken: 'my-hopara-token',\n targetElementId: 'my-target-element',\n callbacks: [\n {\n name: 'my-callback-action',\n callback: (row) => {\n console.log('Callback triggered', row)\n }\n }\n ],\n})\n```\n","readmeFilename":"README.md"}