Repository: h2oai/wave
File: ui/src/tall_stats.tsx (TypeScript)

Code before:
//     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.

import { Model } from 'h2o-wave'
import React from 'react'
import { Stat } from './stats'
import { cards } from './layout'
import { bond } from './ui'
import { stylesheet } from 'typestyle'
import { cssVar } from './theme'

/** Create a set of stats to be displayed vertically. */
export interface State {
  /** The individual stats to be displayed. */
  items: Stat[]
}

const
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      textAlign: 'center',
      gap: 24,
      padding: 24,
    },
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    
    const
      render = () => {
        const stats = state.items.map(({ label, value }, i) => (
          <div key={`${i}-${label}`}>
            {value && <div className='wave-s40 wave-w4' style={{color: cssVar('themePrimary')}}>{value}</div>}
            <div className='wave-s14 wave-w2' style={{color: cssVar('neutralPrimary'), marginTop: '-8px'}}>{label}</div>
          </div>)
        )
        return (
          <div data-test={name} className={css.card}>
            {stats}
          </div>
        )
      }

Review comment (suggestion):
I suggest adding `justify-content: space-evenly` to distribute free space evenly so that the card looks good no matter the size. Other solutions/suggestions are welcome.

Code after:
//     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.

import { Model } from 'h2o-wave'
import React from 'react'
import { Stat } from './stats'
import { cards } from './layout'
import { bond } from './ui'
import { stylesheet } from 'typestyle'
import { clas, cssVar } from './theme'

/** Create a vertical label-value pairs collection. */
export interface State {
  /** The individual stats to be displayed. */
  items: Stat[]
}

const
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      textAlign: 'center',
      padding: 24,
      justifyContent: 'space-around',
    },
    value: {
      color: cssVar('$themePrimary'),
    },
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const render = () => (
      <div data-test={name} className={css.card}>
        {
          state.items.map(({ label, value }, i) => (
            <div key={`${i}-${label}`}>
              {value && <div className={clas(css.value, 'wave-s40 wave-w4')}>{value}</div>}
              <div className='wave-s14 wave-w2'>{label}</div>
            </div>)
          )
        }
      </div>
    )