pinguxx

const els = document.querySelectorAll('custom-chart');

els[0].details = {
  data: {
    labels: [1, 2, 3, 4],
    series: [[100, 120, 180, 200]]
  },
  options: {
    width: 300,
    height: 200

pinguxx

created() {
    this._el = undefined;
    this.chart = null;
    this.render();
    this.update(true);
  }
  update(newtype) {
    if (!newtype && this.chart) {
      return this.chart.update(this.data, this.options);
    }

pinguxx

attributeChangedCallback(name, oldValue, newValue) {
    this.update(true);
}
set data(data) {
    this._data = data;
    this.update(false);
}
get data() {
    return this._data;
}

pinguxx

hyper.define('date', (date) => {
  let formatted = '',
    newdate = date;
  if (date) {
    if (typeof newdate.getMonth !== 'function') {
      newdate = new Date(date);
    }
    if (typeof newdate.getMonth === 'function') {
      formatted = `
        ${newdate.getMonth() + 1}/${newdate.getDate()}/${newdate.getFullYear()}

pinguxx

import HyperHTMLElement from 'hyperhtml-element/esm';
import Search from "./search";
import Tabs from "./tabs";
const { hyper, Component } = HyperHTMLElement;

class Info extends Component {
  get defaultState() {
    return {
      coin: "",
      data: {},

pinguxx

import HyperHTMLElement from 'hyperhtml-element/esm';
import Search from "./search";
import Tabs from "./tabs";
const { hyper, Component } = HyperHTMLElement;

class Compare extends Component {
  get defaultState() {
    return {
      coin: "",
      path: "/",

pinguxx

import HyperHTMLElement from 'hyperhtml-element/esm';
import Search from "./search";
const {hyper, Component} = HyperHTMLElement;

class Tabs extends Component {
  get defaultState() {
    return {
      path: ""
    }
  }

pinguxx

import HyperHTMLElement from 'hyperhtml-element/esm';
const {hyper, Component} = HyperHTMLElement;

class Search extends Component {
  constructor() {
    super();
    fetch(`https://min-api.cryptocompare.com/data/all/coinlist`)
      .then(b => b.json())
      .then(data => {
        this.setState({options: data.Data});

pinguxx

import HyperHTMLElement from 'hyperhtml-element/esm';
const {hyper, Component} = HyperHTMLElement;

class Compare extends Component {
  get defaultState() {
    return {
      coin: ""
    }
  }
  update(state) {

pinguxx

import hyperHTMLApp from 'hyperhtml-app/index';

const happ = hyperHTMLApp();

happ.get('/', (ctx) => {
  console.log("index");
});

happ.get('/info', (ctx) => {
  console.log("info");