Nebula.js: stardust

import { embed } from '@nebula.js/stardust'
const n = embed(app);
n.render({ id: 'abc' });

import { useState } from '@nebula.js/stardust';
// ...
// initiate with simple primitive value
const [zoomed, setZoomed] = useState(false);

// update
setZoomed(true);

// lazy initiation
const [value, setValue] = useState(() => heavy());

import { useEffect } from '@nebula.js/stardust';
// ...
useEffect(() => {
  console.log('mounted');
  return () => {
    console.log('unmounted');
  };
}, []);

import { useMemo } from '@nebula.js/stardust';
// ...
const v = useMemo(() => {
  return doSomeHeavyCalculation();
}), []);

import { usePromise } from '@nebula.js/stardust';
import { useModel } from '@nebula.js/stardust';
// ...
const model = useModel();
const [resolved, rejected] = usePromise(() => model.getLayout(), []);

import { useElement } from '@nebula.js/stardust';
// ...
const el = useElement();
el.innerHTML = 'Hello!';

import { useRect } from '@nebula.js/stardust';
// ...
const rect = useRect();
useEffect(() => {
  console.log('resize');
}, [rect.width, rect.height])

import { useLayout } from '@nebula.js/stardust';
// ...
const layout = useLayout();
console.log(layout);

import { useStaleLayout } from '@nebula.js/stardust';
// ...
const staleLayout = useStaleLayout();
console.log(staleLayout);

import { useAppLayout } from '@nebula.js/stardust';
// ...
const appLayout = useAppLayout();
console.log(appLayout.qLocaleInfo);

import { useModel } from '@nebula.js/stardust';
// ...
const model = useModel();
useEffect(() => {
  model.getInfo().then(info => {
    console.log(info);
  })
}, []);

import { useApp } from '@nebula.js/stardust';
// ...
const app = useApp();
useEffect(() => {
  app.getAllInfos().then(infos => {
    console.log(infos);
  })
}, []);

import { useGlobal } from '@nebula.js/stardust';

// ...
const g = useGlobal();
useEffect(() => {
  g.engineVersion().then(version => {
    console.log(version);
  })
}, []);

import { useSelections } from '@nebula.js/stardust';
import { useElement } from '@nebula.js/stardust';
import { useEffect } from '@nebula.js/stardust';
// ...
const selections = useSelections();
const element = useElement();
useEffect(() => {
  const onClick = () => {
    selections.begin('/qHyperCubeDef');
  };
  element.addEventListener('click', onClick);
  return () => {
    element.removeEventListener('click', onClick);
  };
}, []);

import { useTheme } from '@nebula.js/stardust';

const theme = useTheme();
console.log(theme.getContrastinColorTo('#ff0000'));

import { useEmbed } from '@nebula.js/stardust';

const embed = useEmbed();
embed.render(...)

import { useTranslator } from '@nebula.js/stardust';
// ...
const translator = useTranslator();
console.log(translator.get('SomeString'));

import { useDeviceType } from '@nebula.js/stardust';
// ...
const deviceType = useDeviceType();
if (deviceType === 'touch') { ... };

// provide plugins that can be used when rendering
embed(app).render({
  element,
  type: 'my-chart',
  plugins: [plugin]
});

// It's up to the chart implementation to make use of plugins in any way
import { usePlugins } from '@nebula.js/stardust';
// ...
const plugins = usePlugins();
plugins.forEach((plugin) => {
  // Invoke plugin
  plugin.fn();
});

import { useAction } from '@nebula.js/stardust';
// ...
const [zoomed, setZoomed] = useState(false);
const act = useAction(() => ({
  hidden: false,
  disabled: zoomed,
  action() {
    setZoomed(prev => !prev);
  },
  icon: {}
}), [zoomed]);

// configure embed to disallow active interactions when rendering
embed(app, {
 context: {
   constraints: {
     active: true, // do not allow interactions
   }
 }
}).render({ element, id: 'sdfsdf' });

import { useConstraints } from '@nebula.js/stardust';
// ...
const constraints = useConstraints();
useEffect(() => {
  if (constraints.active) {
    // do not add any event listener if active constraint is set
    return undefined;
  }
  const listener = () => {};
  element.addEventListener('click', listener);
  return () => {
    element.removeEventListener('click', listener);
  };
}, [constraints])

// configure embed to disallow active interactions when rendering
embed(app, {
 context: {
   interactions: {
     active: false, // do not allow interactions
   }
 }
}).render({ element, id: 'sdfsdf' });

import { useInteractionState } from '@nebula.js/stardust';
// ...
const interactions = useInteractionState();
useEffect(() => {
  if (!interactions.active) {
    // do not add any event listener if active constraint is set
    return undefined;
  }
  const listener = () => {};
  element.addEventListener('click', listener);
  return () => {
    element.removeEventListener('click', listener);
  };
}, [interactions])

// when embedding the visualization, anything can be set in options
embed(app).render({
  element,
  type: 'my-chart',
  options: {
    showNavigation: true,
  }
});

// it is up to you use and implement the provided options
import { useOptions } from '@nebula.js/stardust';
import { useEffect } from '@nebula.js/stardust';
// ...
const options = useOptions();
useEffect(() => {
  if (!options.showNavigation) {
    // hide navigation
  } else {
    // show navigation
  }
}, [options.showNavigation]);

import { useImperativeHandle } form '@nebula.js/stardust';
// ...
useImperativeHandle(() => ({
  resetZoom() {
    setZoomed(false);
  }
}));

// when embedding the visualization, you can get a handle to this API
// and use it to control the visualization
const ctl = await embed(app).render({
  element,
  type: 'my-chart',
});
ctl.getImperativeHandle().resetZoom();

import { onTakeSnapshot } from '@nebula.js/stardust';
import { useState } from '@nebula.js/stardust';
import { useLayout } from '@nebula.js/stardust';

const layout = useLayout();
const [zoomed] = useState(layout.isZoomed || false);

onTakeSnapshot((copyOfLayout) => {
  copyOfLayout.isZoomed = zoomed;
  return Promise.resolve(copyOfLayout);
});

import { useRenderState } from '@nebula.js/stardust';

const renderState = useRenderState();
useState(() => {
  if(needProperteisUpdate(...)) {
     useRenderState.pending();
     updateProperties(...);
  } else {
     useRenderState.restore();
     ...
  }
}, [...]);

// In a Nebula visualization
import { useEmitter } from '@nebula.js/stardust';
useEffect(()=> {
  // on some trigger
  emitter.emit("trigger", params)
}, [...])

// In a mashup
const viz = await n.render({
  element: el,
  id: 'abcdef'
});
viz.addListener("trigger", ()=> {
  // do something
})

// configure nebula to enable navigation between charts
embed(app, {
  context: {
    keyboardNavigation: true, // tell Nebula to handle navigation
  }
}).render({ element, id: 'sdfsdf' });

import { useKeyboard } from '@nebula.js/stardust';
// ...
const keyboard = useKeyboard();
useEffect(() => {
 // Set a tab stop on our button if in focus or if Nebulas navigation is disabled
 button.setAttribute('tabIndex', keyboard.active || !keyboard.enabled ? 0 : -1);
 // If navigation is enabled and focus has shifted, lets focus the button
 keyboard.enabled && keyboard.active && button.focus();
}, [keyboard])

import { conversion } from '@nebula.js/stardust';

export default function() {
  return {
    qae: {
      ...
      importProperties: ( exportFormat, initialProperties ) =>  conversion.hyperCube.importProperties(exportFormat, initialProperties),
      exportProperties: ( fullPropertyTree ) => conversion.hyperCube.exportProperties(fullPropertyTree)
    },
    ...
  };
}

const n = embed(app);
const inst = await n.field('field_name');
inst.mount(document.querySelector('.listbox'), {
  components: [{
   key: 'theme',
   header: {
     fontColor: { color: '#f00' },
     fontSize: 23,
   },
   content: {
     fontSize: 16,
     useContrastColor: false,
   }
  },{
   key: 'selections',
   colors: {
     selected: { color: '#0f0' },
     alternative: { color: '#ededed' },
     excluded: { color: '#ccc' },
     selectedExcluded: { color: '#bbb' },
     possible: { color: '#fefefe' },
     possible: { color: '#fefefe' },
   }
 }]
});

import { embed } from '@nebula.js/stardust'
n = embed(app, {
  context: {
    keyboardNavigation: true,
    theme: 'purple',
  },
  load: ({ name, version }) => {
    if (name === 'linechart') {
      return Promise.resolve(line);
    }
  },
  types: [
    {
      name: 'bar',
      load: () => Promise.resolve(bar),
    },
  ],
  themes: [
    {
      id: 'purple',
      load: () => Promise.resolve(purpleThemeJson),
    },
  ],
});

const sheet = await embed(app).render({
  element,
  id: "jD5Gd"
});
sheet.destroy();

const viz = await embed(app).render({
  element,
  type: 'barchart'
});
viz.destroy();

// A config for Creating objects:
const createConfig = {
  type: 'bar',
  element: document.querySelector('.bar'),
  extendProperties: true,
  fields: ['[Country names]', '=Sum(Sales)'],
  properties: {
    legend: {
      show: false,
    },
  }
};
nebbie.render(createConfig);
// A config for rendering an existing object:
const createConfig = {
  id: 'jG5LP',
  element: document.querySelector('.line'),
};
nebbie.render(createConfig);

const plugin = {
  info: {
    name: "example-plugin",
    type: "meta-type",
  },
  fn: () => {
    // Plugin implementation goes here
  }
};

import { useElement, useLayout } from '@nebula.js/stardust';

export default function() {
  return {
    qae: {
      properties: {
        dude: 'Heisenberg',
      }
    },
    component() {
      const el = useElement();
      const layout = useLayout();
      el.innerHTML = `What's my name? ${layout.dude}!!!`;
    }
  };
}