<!DOCTYPE html>
<!--
  @license
  Copyright 2020 Google LLC. All Rights Reserved.
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  =============================================================================
  -->
<html>

<head>
  <meta charset="utf-8">
  <script src="./debug.js"></script>


  <style>
    article {
      max-width: 960px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      padding: 40px;
    }

    script.show-script {
      display: block;
      max-width: 720px;
      background-color: floralwhite;
      font-family: "Lucida Console", Monaco, "Courier New", Courier, monospace;
      font-size: 12px;
      margin-left: -40px;
      white-space: pre;
    }

    article div {
      margin-bottom: 25px;
    }

    h3 {
      margin-top: 60px;
    }
  </style>
</head>

<body>
  <article>
    <h1>tfjs-vis debug page</h1>

    <section>
      <h2>Debug Area</h2>
      <div id='debug-cont'></div>

      <script class='show-script'>
        {
          const container = document.getElementById('debug-cont');

          //
          const rows = 50;
          const cols = 50;
          const values = [];
          const tickLabels = [];
          for (let i = 0; i < rows; i++) {
            const row = []
            tickLabels.push(`tick label ${i}`)
            for (let j = 0; j < cols; j++) {
              row.push(Math.round(Math.random() * 50));
            }
            values.push(row);
          }
          const data = { values, tickLabels };

          const surface = tfvis.visor().surface({ name: 'Confusion Matrix', tab: 'Charts' });
          tfvis.render.confusionMatrix(surface, data, {
            width: 800,
            height: 800,
            xLabel: 'Howdy',
            yLabel: 'There',
            colorMap: ['#f7fbff', '#FF92c6'],
            fontSize: 32,
            showTextOverlay: false
          }
          );

          tfvis.render.confusionMatrix(container, data,
            {
              width: 800,
              height: 800,
              xLabel: 'Howdy',
              yLabel: 'There',
              colorMap: ['#f7fbff', '#FF92c6'],
              fontSize: 32,
              showTextOverlay: false
            }
          );
        }
      </script>
    </section>
  </article>
</body>

</html>