LookerのCustom Visualizationを試す

import React from 'react'
import ReactDOM from 'react-dom';
import Calendar from 'react-calendar';

class LookerCalendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeStartDate: props.activeStartDate,
            events: props.events,
            font_size: props.font_size
        };
        this.getTileClass = this.getTileClass.bind(this);
        this.getTileContent = this.getTileContent.bind(this);
    }

    // Formatter
    getFormatDate(date) {
        return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
    }

    // Holiday and Weekend
    getTileClass({ date, view }) {
        // Only Month view
        if (view !== 'month') {
            return '';
        }
        const day = this.getFormatDate(date);
        if (this.state.events[day] && this.state.events[day].holiday === 'Yes') {
            return 'holiday'
        } else if (this.state.events[day] && this.state.events[day].weekday === 0) {
            return 'sunday'
        } else if (this.state.events[day] && this.state.events[day].weekday === 6) {
            return 'saturday'
        } else {
            return ''
        }
    }

    // Event
    getTileContent({ date, view }) {
        // Only Month view
        if (view !== 'month') {
            return null;
        }
        const day = this.getFormatDate(date);
        // If there is content, display
        return (
            <p style={{ fontSize: this.props.font_size }}>
                {(this.state.events[day] && this.state.events[day].text) ?
                    this.state.events[day].text : <br></br>
                }
            </p>
        );
    }

    render() {
        return (
            <div>
                <Calendar
                    tileClassName={this.getTileClass}
                    tileContent={this.getTileContent}
                    activeStartDate={this.props.activeStartDate}
                />
            </div>
        );
    }
}

looker.plugins.visualizations.add({
    // Id and Label are legacy properties that no longer have any function besides documenting
    // what the visualization used to have. The properties are now set via the manifest
    // form within the admin/visualizations page of Looker
    id: "calendar",
    label: "Calendar",
    options: {
        font_size: {
            type: "string",
            label: "Font Size",
            values: [
                { "Large": "large" },
                { "Small": "small" }
            ],
            display: "radio",
            default: "large"
        }
    },
    // Set up the initial state of the visualization
    create: function (element, config) {

        // Insert a <style> tag with some styles we'll use later.
        element.innerHTML = `
            <style>
                .react-calendar__month-view__weekdays__weekday abbr{text-decoration: none;}
                .holiday{ color: #ff0000;}
                .sunday{ color: #ff0000;}
                .saturday{ color: #0000FF;}
                }
            </style>
            `;

        // Create a container element to let us center the text.
        let container = element.appendChild(document.createElement("div"));
        container.className = "calendar";
        this._element = container.appendChild(document.createElement("div"));
    },
    // Render in response to the data or settings changing
    updateAsync: function (data, element, config, queryResponse, details, done) {

        // Clear any errors from previous updates
        this.clearErrors();

        // Throw some errors and exit if the shape of the data isn't what this chart needs
        if (queryResponse.fields.dimensions.length == 0) {
            this.addError({ title: "No Dimensions", message: "This chart requires dimensions." });
            return;
        }
        // Set the size
        let font_size = config.font_size || this.options.font_size.default;
        if (config.font_size == "small") {
            font_size = "12px";
        } else {
            font_size = "24px";

        }

        // Parse Event
        let events = {}
        let days = []
        for (var row of data) {
            let date_cell = row[queryResponse.fields.dimensions[0].name].value;
            let content_cell = row[queryResponse.fields.dimensions[1].name].value;
            let holiday_cell = row[queryResponse.fields.dimensions[2].name].value;
            // Parse Date object
            const date = new Date(date_cell);
            events[date_cell] = {
                text: content_cell,
                weekday: date.getDay(),
                holiday: holiday_cell
            };
            days.push(date);
        };
        const max_date = new Date(Math.max.apply(null, days));
        const start_date = new Date(max_date.setDate(max_date.getDate() - 30))
        
        // Finally update the state with our new data
        this.chart = ReactDOM.render(
            <LookerCalendar
                activeStartDate={start_date}
                events={events}
                font_size={font_size}
            />, this._element
        );

        // We are done rendering! Let Looker know.
        done();
    }
});